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

北京市 1F
不错的动画交互的代码了,mack一下。