动画

动画和过渡类似，都可以实现一些动态的效果
设置动画 效果，必须先要设置一个关键帧
关键帧设置动画执行的每一个步骤
@keyframes + name
{

from 表示动画的开始i位置
margin-left 0; 也可以用%

to 表示动画的结束位置
margin-left 700px;
}
所有动画都要设置 animation-name
animation-name ：test；
//时间
animation-duration: 2s

//动画延迟
animation-delay:2s

//迭代 动画执行次数
animation-iteration-count 20 // infinte ；

//animation-direction:指定动画运行的方向
默认值 normal 从 from to
reverse 从to到from 反向
alternate 来回
alternate-reverse
animation-play-state 设置动画的执行状态
paused

animation-fill-mode:none ;动画的填充模式
none 默认值 动画执行完毕 回到初试位置

forwards 停到最后的位置
backwards 延时等待时，就直接处于开始位置，状态
both 具有两个 forwards backwards

关键帧

@keyframes ball{
from {
margin-top:0;
}
to{
margin-top:400px;
}

}