CSS3--动画简介

1.CSS3动画
CSS3动画简介
通过改变元素的属性值来实现动画效果的。
animation实现动画主要由两部分组成：通过类似flash动画的关键帧来生明一个动画；在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
animation属性的浏览器兼容性

CSS3动画的使用过程
（1）通过关键帧（@keyframes）来声明一个动画
语法：@keyframes IDENT{

from{/*CSS样式写在这里*/}
percentage{/*CSS样式写在这里*/}
to{/*CSS样式写在这里*/}
}

@keyframes的浏览器兼容性

（2）找到要设置动画的元素，并且调用关键帧声明的动画
语法：animation:animation-name animation-duration animation- timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode;
汉语：animation：动画名称，动画的播放时间，动画的播放方式，开始播放动画的时间，动画的播放次数，动画的播放方向，动能挂的播放状态，动画时间外属性
①animation-name：是由@keyframes创建的动画名称
②animation-duration、animation-timing-function、animation-delay和过渡时间、过渡方式、延迟时间是一样的。
③animation-iteration-count：动画的播放次数。值通常为整数，默认为1，表示动画执行一次。特殊值infinite，表示动画无限次播放
④animation-direction：动画的播放方向，主要有两个值，normal表示动画每次都是循环向前播放。另一个值是alternate，表示动画播放为偶数次则向前播放，奇数次则向反方向播放。例如一个动画的弹跳
⑤animation-play-state：动画的播放状态，两个值，running、paused。类似于音乐播放器，通过paused将正在播放的元素动画停下来，也可以使用running将暂停的动画重新播放
⑥animation-fill-mode：定义在动画开始之前和结束之后发生的操作。其取值为forwards表示动画在结束播放后继续应用最后关键帧的位置，取值为backwards表示会在向元素应用动画样式时迅速应用动画的初始帧，取值为both表示元素动画同时具有forwards和backwards的效果。