animation动画复合属性

css3中的animation动画复合属性：name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-count(播放次数) direction(是否反向) fill-mode(不播放时的样式) play-state(运行或暂停)

比如：文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/

可以写成：文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

-webkit-animation: ripple 2s ease 0s infinite alternate;

timing-function：
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

iteration-count：
n 一个数字，定义应该播放多少次动画
infinite 指定动画应该播放无限次（永远）文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

play-state：文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

paused 指定暂停动画
running 指定正在运行的动画文章源自知更鸟-https://zmingcx.com/animation-composite-property.html 文章源自知更鸟-https://zmingcx.com/animation-composite-property.html