animation: name duration timing-function delay iteration-count direction;
name: 动画名称(使用@keyframe定义的动画名称)
duration: 规定完成动画所花费的时间,以秒或毫秒计。
timing-function: 规定动画的运动曲线(linear:匀速运动,ease:默认属性,先慢再快再慢。ease-in:由慢到快,ease-out:由快到慢,ease-in-out:相对于匀速,(开始和结束都慢)两头慢)。
delay: 动画开始之前的延迟。
iteration-count:动画播放的次数。(infinite无限轮播)
direction:规定是否应该轮流反向播放动画。
例:
@-webkit-keyframes mycolor {
0% { background-color:red;}
40% { background-color:darkblue;}
70% { background-color:yellow;}
100% { background-color:red;}
}
#animate_1:hover{ -webkit-animation: mycolor 5s linear infinite
}