div{animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */}
animation 属性是一个简写属性,用于设置六个动画属性:
animation-name: 规定需要绑定到选择器的 keyframe 名称
animation-duration: 规定完成动画所花费的时间,以秒或毫秒计
animation-timing-function: 规定动画的速度曲线
linear: 动画从头到尾的速度是相同的
ease: 默认。动画以低速开始,然后加快,在结束前变慢
ease-in: 动画以低速开始
ease-out: 动画以低速结束
ease-in-out: 动画以低速开始和结束
animation-delay: 规定在动画开始之前的延迟
animation-iteration-count: 规定动画应该播放的次数(infinite | number)
animation-direction: 规定是否应该轮流反向播放动画。
normal: 每个循环内动画向前循环即每个动画循环结束,动画重置到起点重新开始,这是默认属性
alternate: 动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向,比如,ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse: 反向运行动画,每周期结束动画由尾到头运行
alternate-reverse: 反向交替, 反向开始交替动画第一次运行时是反向的,然后下一次是正向,后面依次循环。决定奇数次或偶数次的计数从1开始
keyframes直接举个例子吧
@keyframes myfirst {
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}