笔记：CSS动画animation属性

animation 属性是一个简写属性，语法如下：

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

默认值为： none  0  ease  0  1  normal

animation有如下的六个属性：

1.animation-name(默认值为none)：规定需要绑定到选择器的keyframes名称。

@keyframes规则声明动画：

@keyframes规则用于创建动画，在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

/* 为使动画能在所有浏览器中正常工作，可以同时声明多个不同前缀的同名动画 */

@keyframes myfirstkeyframes{
    from{...}
    to{...}
}


@-moz-keyframes myfirstkeyframes{     /* Firefox */
    from{...}
    to{...}
}


@-webkit-keyframes myfirstkeyframes{  /* Safari 和 Chrome*/
    from{...}
    to{...}
}

@-o-keyframes myfirstkeyframes{   /* Opera */
    from{...}
    to{...}
}

/* 当动画完成时，会变回初始的样式 */

2.animation-duration(默认值为0，此时无动画效果)：规定完成动画所花费的时间以秒或毫秒计。

3.animation-time-function(默认值为ease)：规定动画的速度曲线。

ease：初始状态-->终止状态  由快到慢，逐渐变慢。

linear：初始状态-->终止状态  恒速。

ease-in：初始状态-->终止状态  加速状态，也称为渐显效果。

ease-out：初始状态-->终止状态  减速状态，也称为渐隐效果。

ease-in-out：初始状态-->终止状态  先加速后减速，也称为渐显渐隐效果。

cubic-bezier(n,n,n,n)：在cubic-bezier函数中的自己的值，可能的值是从0到1的数值(我理解为自定义速度曲线)。也可以用此函数来写出上面五个的速度曲线。

可以参考这里：贝塞尔曲线——cubic-bezier详解_大白兔-优快云博客_cubic-bezier

4.animation-delay(默认值为0)：规定在动画开始之前的延迟。

5.animation-iteration-count(默认值为1)：规定动画应该播放的次数。

n：定义播放次数的数值。        infinite：规定动画应该无限次播放。

6.animation-direction(默认值为normal，此时动画正常播放)：规定是否应该轮流反向播放动画。

normal：动画正常播放。

alternate：动画轮流反向播放。即奇数时(1，3，5等)正常播放，偶数时(2，4，6等)向后播放。