动画语法（animation）

动画语法（animation）

animation: 动画名字 时间 运动曲线 开始时间 播放次数 是否反向播放 是否运用结束的样式 动画是否运行或暂停

1. animation-name：要绑定到选择器的关键帧所属名字。
   定义动画：@keyframes+name{ }.

@keyframes name {
     from {
             width:200px;
     }
     
     to {
     		width:600px;
	 }

2.animation-duration 需要多少秒，毫秒完成。

3.animation-timing-function 如何完成一个周期。

4.animation-delay 在启动前延迟的间隔。

5.animation-iteration-count 定义动画的播放次数。(number数字 infinite无数次)

div {
	   transition-duration:3s;
       transition-timing-function:ease-out；/* ease-out 淡出 */	
       transition-delay:2s;
       animation-iteration-count:infinite;
     }

6.animation-direction 是否轮流反向播放动画。（nomal，alternat）

div{
	animation-direction:alternat;
}

7.animation-play-state 设置动画暂停。

.box:hover {
	 animation-play-state:paused;
}

8. animation-fill-mode 当动画不播放时（动画完成时，动画有一个延迟未开始播放时），要应用到元素的样式。