css动画的实例讲解（逆战班）

今天总结了css动画的主要定义和用法。
animation-name(必填) //名称
animation-duration(必填) //完成动画时间
animation-timing-function //动画运动速度
值： linear 匀速
ease(默认) 变速(先慢后快,再由快变慢)
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(x,x,x,x) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
animation-delay //动画启动前的延迟时间
animation-iteration-count //动画的播放次数 infinite 动画无限次播放
animation-direction /播放方式
值: normal 正常
reverse 反向播放
alternate 在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
alternate-reverse 在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放
animation-fill-mode //动画完成时.要处于什么状态
值： none 默认，播放完动画后，画面停在起始位置
forwards 在运动结束的之后，停到结束位置
backwards 在延迟的情况下，让0%在延迟前生效
both backwards和forwards同时生效

##足球场实例


首先利用ul标签给足球场一个简易的布局，利用transform-style: preserve-3d给ul、li显示3d空间，利用transform变形和position定位形成一个立体的足球场。perspective定义查看3d视图的角度。

给ul定义动画circle，使球场进行旋转，利用transform-origin定义动画的旋转基点。给li3（也就是球员所在的绿色球场）定义动画top，使球员上下移动和调节透明度。

形成一个简易的动态足球场。