css动画

动画的基本使用
制作动画分为两步
    先定义动画
    在调用动画
动画序列
0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
在@keyframes中规定某项CSS样式，就能创建当前样式逐渐变换为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变多种任意样式和任意多的次数
请用百分比来规定变化发生的时间，或使用“from”和“to”，等同于0%和100%
动画常用属性
属性    描述
@keyframes    规定动画
Animation    所有动画的简写属性，除了animation-play-state属性
Animation-name    规定@keyframes动画的名称
Animation-duration    规定动画完成一个周期所花费的秒或毫秒，默认是0
Animation-timing-function    规定动画的速度曲线，默认是ease
Animation-delay    规定动画何时开始，默认是0
Animation-iteration-count    规定动画被播放的次数，默认是1，还有infinite
Animation-direction    规定动画是否在下一周期逆向播放，默认是、normal，altenate逆向播放
Animation-play-state    规定动画是否正在运行或暂停，默认是running还有paused
Animation-fill-mode    规定动画结束后的状态，保持forwards,回到backwards
动画简写属性
Animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者动画结束的状态
简写属性里面不包含animation-play-state
暂停动画：anmation-play-state:paused 经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来，animation-direection:alternate
盒子动画结束后，停在结束位置:animation:forwards;
速度曲线细节
Animation-timing-function:规定动画的速度曲线，默认是“ease”
值    描述
Linear    动画从头到尾的速度是相同的，匀速
Ease    默认，动画以低速开始，然后加快，在结束前变慢
Ease-in    动画以低速开始
Ease-out    动画以低速结束
Ease-in-out    动画以低速开始和结束
Steps()    指定了时间函数的间隔数量（步长）
低版本浏览器的专属前缀
谷歌     webkit
火狐     mo2
欧朋     0