css的动画 - 掘金

一、过渡动画 transition

transition是一个过渡动画，它可以帮你在两个状态间的切换，实现一个过渡的效果

先看代码

div{
           width:100px;
           height:100px;
           background-color:red; 
           transition:all 1s linear 0.5s;
}
div:hover{
    width:200px;
    height:200px;
}

transition后面的四个参数分别是：

你想要过渡的属性/默认是all (transition-property)
过渡的时间（transition-duration）
过渡的运动曲线（transition-timing-function)
过渡前要暂停几秒 (transition-delay)

二、cubic-bezier

敲黑板！！！这里我不教你怎么解三阶贝塞尔曲线，但我教你怎么去使用cubic_bezier这个属性

这是三阶贝塞尔曲线的公式P = (1-t)^2*P0 + 2*(1-t)*t*P1 + t^2*P2

不懂？没关系，你可以忘了上面的公式，看下图

根据高中数学，斜率越大，速度越大，这条曲线往上走，则是正向，往下走则是负向。好了懂了这个就好，看下图

看完上面的图，你可能还不懂，那我们开始实战

cubic-bezier(0.5,-1,0.5,2)

第一个坐标是（0.5，-1）而贝塞尔曲线的起点是（0，0），所以第一个坐标在起点的下方，即运动会先往负方向运动，再往正方向运动

第二个坐标是（0.5，2），而贝塞尔曲线的终点是（1，1）所以第二个坐标在终点的上方，即到达终点时的运动方向是负方向。

好了看动图

好了你是不是学会了呢，要注意的是t轴的坐标只能是在0~1之间，不能超出这个范围，

想让运动有一个回退的动作，要么第一个坐标y轴低于0，要么第二个坐标y轴高于1，

黑色曲线的斜率即是运动的速度

cubic-bezier(t1,y1,t2,y2)

三、逐帧动画 animation

transition只能实现两个状态之间的切换，而animation可以实现多个状态的动画效果

animation两步走

定义动画

@keyframes run {
    0%{ //  0%可以换成from
        left:0px;
        top:0px
    }
    25%{
        left:100px;
        top:0px;
    }
    50%{
        left:100px;
        top:100px;
    }
    75%{
        left:0px;
        top:100px
    }
    100%{  //100%可以换成to
        left:0px;
        top:0px
    }
}

应用动画

div{
    animation:run 1s cubic-bezier(0.5,-1,0.5,2) 1s infinite reverse
        //运动曲线不是整一个动画的速率，而是每段百分比的时间内都是这样的运动速率
}

animation参数：

animation-name 应用的动画名
animation-duraiton 运动时间
animation-timint-function 运动曲线
animation-delay 运动前暂停多久
animation-iteration-count 运动多少次// infinite无限次
animation-direction 运动方向//是否轮流反向运动
animation-play-state 规定运行或暂停
animation-fill-mode 一般使用both，开始状态使用第一帧，结束后保留第一帧

四、steps配合animation

steps(步骤数量，end/start)

步骤数量是指完成这段动画要用几个步骤去做，步骤数量越多，动画越细腻

end 保留当前帧状态，直到这段动画时间结束一般会失去最后一帧，用forward补救

start 保留下一帧状态，直到这段动画时间结束一般会失去第一帧

用了steps后则不能再用cubic-bezier等运动曲线了

实例

 @keyframes run{
            0%{
                left:0;
                top:0;
            }
            25%{
                left:100px;
                top:0;
            }
            50%{
                left:100px;
                top:100px
            }
            75%{
                left:0px;
                top:100px;
            }
            100%{
                left:0px;
                top:0px;
            }
        }
        div{
           animation:run 4s steps(2,end)
        }

可以看到四段运动，每一段运动都是用两个步骤完成的

看另一个例子，理解end和start的区别

 @keyframes run{
            0%{
               background:red;
            }
            25%{
                background:blue;
            }
            50%{
                background:yellow;
            }
            75%{
                background:green;
            }
            100%{
                background:black
            }
        }
        div{
           width:100px;
           height:100px;
           animation:run 4s steps(1,end)
        }

会发现5个颜色，失去了最后的黑色

使用end会保留当前帧直到动画结束，从0%到25%会保留0%的帧直到25%的动画结束，类推，从75%到100%会保留75%的帧直到100%动画结束，所以会失去最后一帧

start各位可以自己去做做，一般会失去第一帧

结语

因为本人水平有限，如果有错漏的地方，还请看官多多指正

本文作者胡志武，写于2019/5/24，如果要转载，请注明出处，

如果觉得写的不错，请点个赞吧