竞博体育 > 前端 > 我把css动画的制作分为3个阶段,实现旋转transform

我把css动画的制作分为3个阶段,实现旋转transform

vue css动画,vuecss

.toggle-cart-enter-active, .toggle-cart-leave-active {
transition: all .3s ease-out;
}
.toggle-cart-enter, .toggle-cart-leave-active {
transform: translateY(100%);
}

css动画,vuecss .toggle-cart- enter-active , .toggle-cart- leave-active { transition: all .3s ease-out; } .toggle-cart- enter , .toggle-cart- leave-active { transform: trans...

css动画的动画制作没有什么特别高深的地方,引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的,但我想要强调的是掌握并深入的理解css的基础,以及灵活的运用是做出一个画面美观、代码简洁、性能高效的css动画的必备技能。今天,我也就不再多做赘述,我就来说一说我在做css动画的心得体会。

css3中通过这三者可以实现很多的奇妙效果,这三者的名字是:转换(transform);(过渡)transitition;(动画)animation。

我把css动画的制作分为3个阶段:学习(初步)阶段、模仿阶段、自我开发阶段。

先说他们的共同点:

学习(初步)阶段

这三者都有不同程度的浏览器兼容问题,如果要兼容所有的浏览器,需要加很多前缀;(css3的大部分效果都有这个问题)

首先,现在web前端框架,理念不断地推陈出新的今天,作为一个前端开发人员学习应该成为我们的常态,它是我们拿取高薪的基础,同时也是我们不被淘汰的基石之一;
其次,就是要加深理解、加强练习。二者互为依托,理解需要通过练习来验证,理解使练习变得简单;
最后,就是把学习、理解和练习的成果展现出来。例如,在我们所做的项目中来展现自己的成果,这样可以转变为更为直观的东西,与此同时也能提高自己的关注度(这不多说,你也知道)。

使用transform属性时:

模仿阶段

transform:rotate(7deg);

-ms-transform:rotate(7deg);/* IE 9 */

-moz-transform:rotate(7deg);/* Firefox *竞博体育官方版下载 ,/

-webkit-transform:rotate(7deg);/* Safari 和 Chrome */

-o-transform:rotate(7deg);/* Opera */

作为一个程序员,特别是一个前端的程序员,你会像spider一样不停的在网页之间进行跳转,找到自己喜欢的页面,获取自己需要的代码和其他资源。当我们找到我们所要的资源后就是使用。
每当我们在网页中发现一些漂亮的动画,我们将想着这个动画效果我们来现的话,我们会怎么做?我们首先会查看原网页中的html结构,并尝试着把它写出来,然后根据自己的理解写出来css代码,写完后我们会查看效果,如果实现了元网页中的效果,我们也会尝试着优化代码,看一看能不能简写代码;也会尝试看看能不能添加一些东西是动画更酷;同时也会尝试一下能不能在此动画效果的基础上创作出更好看的动画效果。

使用transition属性时:

只是进行文字的描述感觉有些空洞,那就举一系列与border有关的css动画来说明一下。

transition: width 2s;

-moz-transition: width 2s;/* Firefox 4 */

-webkit-transition: width 2s;/* Safari 和 Chrome */

-o-transition: width 2s;/* Opera */

竞博体育官方版下载 1

使用animation属性时:

border-anim-1

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite;/* Safari 和 Chrome */

这是一个简单的实现border的动画,但这个动画并不是真正的实现元素的border的动画,它是通过伪元素::after, ::before中的一个或两个的运动来实现的。

继续说他们的不同点:

css代码如下:

transform只是呈现了一种静态的表现形式,它拥有自己的小属性; 实现偏移transform:translate(x,y);实现旋转transform:ratote(xdeg); 实现放大缩小transform:scale(x,y); 此处列举的这三个属性都是2D的,当然也有3D的,只是使用可能不是那么多。

.l-border-line::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #ff0000;
content: '';
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: ease-in-out 0.2s;
transition: ease-in-out 0.2s;
}
.l-border .l-border-line::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

transition则是当元素的css发生改变时(不论是css伪类事件,还是js控制导致的变化,此处可以和transform进行配合),对改变的属性呈现一种过渡效果。对于这种过渡效果有四个属性:

竞博体育官方版下载 2

transition-property过渡的属性(具体属性 | all);

transition-duration过渡的时间(Xs);

transition-timing-function过渡时时的速度曲线(linear线性匀速 | ease默认,先快后慢 | ease-in动画以低速开始 |ease-out动画以低速结束 | ease-in-out以低速开始和结束);

transition-delay过渡时的延迟时间(Xs);

border-anim-2

可以用缩写的形式一块在transition后进行定义,最少定义两个参数(属性和时间)

这个动画效果有两个动画叠加组成,其中一个是当鼠标移入border的颜色的变化,这里是一个transition过渡动画;另一个是当鼠标移入动画沿着border的环绕颜色变化,要实现它需要给动画一个延时让动画沿着宽高来变化,但是一个长方形有两个宽高,所以,伪元素::after, ::before两个都需用上,
鼠标移入前:
伪元素::before transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in,
伪元素::after transition::border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s。

animation是指我们定义的动画。这需要我们先定义一个动画,继而才能使用这个动画。用

鼠标移入时:
伪元素::before transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
伪元素::after transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;

@keyframes  动画名 {

from {属性:值;}to {属性:值;}   /*此处可以和transform进行配合*/

}

@-webkit-keyframes /*在Safari 和 Chrome中时,keyframes有兼容格式*/

css代码如下:

后面再用animation来调用定义的函数,animation的动画效果也有多个属性:

.l-border{
    display: inline-block;
    padding: 16px 32px;
    border: 1px solid #ebebeb;
    -webkit-transition: all 0.6s ease-in;
    transition: all 0.6s ease-in;
}

.l-border:hover{
    border: 1px solid #367dff;
}
.border-line {
    position: relative;
    display: inline-block;
    height: 100%;
    background: none;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 0px transparent;
}

.border-line::after,
.border-line::before {
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.border-line::after {
    top: 0;
    left: 0;
    -webkit-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
    transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
}

.border-line::before {
    bottom: 0;
    right: 0;
    -webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
    transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
}

.border-line:hover::after,
.border-line:hover::before {
    width: 100%;
    height: 100%;
}

.border-line:hover::after {
    border-top-color: #367dff;
    border-right-color: #367dff;
    -webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
    transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}

.border-line:hover::before {
    border-bottom-color: #367dff;
    border-left-color: #367dff;
    -webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
    transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}

animation-name动画名;

animation-duration动画时间(Xs);

animation-timing-function动画速度曲线(linear线性匀速 | ease默认,先快后慢 | ease-in动画以低速开始 |ease-out动画以低速结束 | ease-in-out以低速开始和结束 |);

animation-delay动画延迟时间(Xs);

animation-iteration-count动画次数(number / infinite无限次);

animation-direction是否反向播放(normal | alternate)

竞博体育官方版下载 3

这些属性可以用缩写的形式一块在animation后进行定义,最少定义两个参数(动画名和时间)

border-anim3.gif

以上,欢迎大家拍砖O(∩_∩)O

这个动画有两部分组分成:一是中间文字内容的变形translate,然后加上一个transition过渡来组成;二是边框的动画,它是第一个示例动画的组合。
伪元素::after控制border-left,border-right的动画,伪元素::before控制border-top,border-bottom的动画。

html代码:

  <div class="effect-box">
        <div class="border-line2">
            <p> 319 </p>
            <p> 布局和界面</p>
            <p>Read More</p>
        </div>
    </div>

css代码如下:

.effect-box {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 250px;
    height: 158px;
    background: rgba(53, 172, 197, 1);
    cursor: pointer
}

.effect-box img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .7;
    -webkit-transition: opacity .35s;
    transition: opacity .35s
}

.effect-box:hover img {
    opacity: .4
}

.effect-box .border-line2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2em;
    font-size: 1.25em;
    color: #fff;
    text-transform: uppercase;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.effect-box .border-line2::after,
.effect-box .border-line2::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s
}

.effect-box .border-line2::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1)
}

.effect-box .border-line2::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0)
}


.effect-box:hover .border-line2::after,
.effect-box:hover .border-line2::before {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.effect-box .border-line2 p {
    padding: 4px 10px;
    margin: 0;
    font-size: 16px;
    line-height: 1.0;
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
    opacity: 0;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0)
}

.effect-box:hover .border-line2 p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

自我开发阶段

一个好的web前端工程师,不会仅仅停留在学习和模仿的阶段,同时作为一个好的程序员或有志于成为一个web前端大神的同学来说,写出有自己风格和和特性的css动画是必不可少。那么接下来我就谈一谈我在开发的过程中总结的一点东西。

1.区别css动画的使用场合,pc端或者移动端。pc端,transition,animation,transform之间的组合可以任意使用;移动端按照animation,transform,transition的顺序来使用来制作动画。
2.根据做wap或者pc的项目不同,wap端我强烈的推荐使用3d动画,一是移动端的支持度高,二是使用3d可以进行硬件加速动画。
3.如果要做的动画要要控制状态,设置动画的模式,transition和transform可以不考虑,而直接使用animation来实现animation-play-state控制状态,animation-fill-mode设置模式。
4.做3d动画,就要用到视点,以及要理解在3维空间中改变某一维度值动画如何运动。
5.css动画的局限性也是必须要了解的,例如曲线动画的实现,基于物理的动画实现。而解决曲线动画的实现的替代方案就是结合svg来实现路径动画;而对于后一种物理动画实现的替代方案暂无(正在查找与思考中)。

css动画的制作就分享到这里了,有兴趣的同学可以私聊我,我们来一起讨论,后期若有做css动画好的想法我会继续分享给大家。

最后,再一次感谢大家的支持!

  • 首页
  • 电话
  • 软件