3分钟看懂变换【animation】

前言

大家好，我是cv竹叶，我一直对：transition过度、animation动画、transform变换，这些属性摸不着头脑，就像是对初恋一样让人迷惑。

今天，我要用3分钟，就理解其中的animation变换！

什么？你想看transform变换的理解？那就点这里 3分钟看懂变换【transform】

什么？你想看transition过度的理解？那就点这里 3分钟看懂过度【transition】

今天，我要用3分钟，就理解其中的animation动画属性！

animation属性

animation属性和它的英文名意思一样，动画的意思。可以控制div块，进行想要的样式动画移动，可以设置六个动画参数来控制移动过程！

合写语法：

animation: name duration timing-function delay iteration-count direction;

解析：

值	描述
name	引用需要绑定到该选择器的 keyframe 名称
duration	完成动画所需要的时间，以秒或毫秒计。
timing-function	设置动画速度的曲线。
delay	设置在动画开始之前的延迟时间。
iteration-count	设置动画循环播放的次数。
direction	设置轮流反向播放动画。

name参数

name参数，为 选择器@keyframes 动画规定一个名称。

规定了一个选择器的名为：mymove
@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}

引用该选择器：mymove
animation: mymove 5s

其中我们可以看到，选择器里面有from、to，这里涉及到了动画开始与结束的变化过程，变化的样式，可以在过程中设置。from、to还可以用百分号%代替，0%~100%，这样写：

@keyframes mymove
{
    0% {left:0px;}
    100% {left:200px;}
}

duration参数

duration参数，属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

3秒完成选择器mymove的动画
animation: mymove 3s;

timing-function

timing-function参数，设置从开头到结尾以什么速度曲线完成动画。自带的速度曲线linear有5种参数。

设置动画完成速度
animation: mymove 3s linear;

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。

delay

delay 属性定义动画何时开始，以秒或毫秒为单位。

设置1s后开始动画
animation: mymove 3s ease 1s;

iteration-count

iteration-count 属性定义动画的循环播放次数。

动画播放循环3次
animation: mymove 3s ease 1s 3;

direction

direction 属性定义是否轮流反向播放动画。可以选择两个参数，normal默认正向，alternate反向

animation: mymove 3s ease 1s 3 alternate;

animation兼容性

根据canius，可以知道兼容性，ie9以下是不支持的

总结

animation动画属性，可以通过0%-100%逐帧设置动画的运动，达到一些华丽的特效效果。