css3动画：animation

例：

-webkit-animation: myfirst 5s linear 2s infinite alternate;

animation: myfirst 5s linear 2s infinite alternate;

@keyframes myfirst{
　　from{background:red;}
　　to{background:yellow;}
}
@-webkit-keyframes myfirst{
　　frome{background:red;}
　　to{background:yellow;}
} 
//或者
@keyframes myfirst{
　　0%{   }
　　25%{   }
　　50%{    }
　　100%{    }
}

参数及含义：

animation-name: 动画的名字

animation-duration: 动画完成一个周期所花费的秒数，默认是0

animation-timing-function: 规定动画的速度曲线，默认是ease(动画以低速开始，然后加块，在结束前变慢)；

　　　　　　　　　　　　　　linear(动画从头到尾的速度是相同的)

　　　　　　　　　　　　　　ease-in(动画以低速开始)

　　　　　　　　　　　　　　ease-out(动画以低速结束)

　　　　　　　　　　　　　　ease-in-out(动画以低速开始和结束)

animation-delay: 规定动画何时开始，默认是0；

animation-iteration-count: 规定动画被播放的次数，默认是1， infinite(无限循环)

animation-direction: 规定动画是否在下一周期逆向地播放，默认是normal（不逆向播放）

　　　　　　　　　　　　reverse(动画反向播放)

　　　　　　　　　　　　alternate(动画在奇数1,3,5、、、正向播放，在偶数2,4,5、、、反向播放)　

　　　　　　　　　　　　alternate-reverse(动画在奇数次1,3,4、、、反向播放，在偶数次2,4,6、、、正向播放)　

巴特西

css3动画：animation

最新文章

热门文章