css3动画属性

一、@keyframes属性

创建动画

@keyframes 动画的名称
{
from {开始样式}
to {结束样式}
}
时间可以用from，to，也可以用百分比规定

二、animation 属性

animation是个简写后的属性，其中包括六个动画属性，分别是：

animation-name 动画绑定的名字，与@keyframes一起使用

animation-duration 动画所用时间，使用s表示

animation-timing-function 规定动画的速度曲线

　　linear 匀速

　　ease 默认的速度，先慢中快后慢

　　ease-in 从慢到快

　　ease-out 从快到慢

　　ease-in-out 从慢到比较慢到慢

animation-delay 规定动画开始前的延迟，用s表示

animation-iteration-count 规定播放次数可写数字。或者无限infinite

animation-direction 规定播放是否反向

三、animation-play-state 属性

规定动画是否播放

animation-play-state:running;
//running为播放
animation-play-state:paused;
//paused为暂停

四、animation-fill-mode 属性

规定播放完之后的样子

none 不改变样子

forwards 变成播放完后的样子

 backwards 变成一开始也就是百分之零的样子

 both 向前和向后填充模式都被应用。