css3动画animation属性大全

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

例：animation: myanimation 2s linear 1s infinite forwards;

animation 属性是一个简写属性，用于设置动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

animation-name    动画名称

animation-duration   动画指定需要多少秒或毫秒完成
值：time      默认值为 0，意味着没有动画效果

animation-timing-function   设置动画如何完成一个周期
值：linear  匀速
       ease   先慢后快，结束前变慢     默认
       ease-in    低速开始
       ease-out  低速结束
       ease-in-out   低速开始和结束
       cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-delay   动画在启动前的延迟间隔
值：time   默认值为 0

animation-iteration-count    动画的播放次数
值：n   一个数字，定义播放多少次动画     默认值1
       infinite    动画无限次播放

animation-direction    是否轮流反向播放动画
值：normal         正常
       reverse        反向播放
       alternate      在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
       alternate-reverse   在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放

animation-fill-mode    当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态
值：none   默认，播放完动画后，画面停在起始位置
      forwards     播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
       backwards   如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
       both   设置动画状态为动画结束或开始的状态（例如设置奇数播放为forwards状态，偶数播放为backwards状态）

animation-play-state    动画是否正在运行或已暂停
值：paused   指定暂停动画
       running   指定正在运行的动画，默认

initial    设置属性为其默认值

inherit   从父元素继承属性

--------------------- 
作者：做来胜手 
来源：CSDN 
原文：https://blog.csdn.net/caiyongshengCSDN/article/details/79398573 
版权声明：本文为博主原创文章，转载请附上博文链接！