CSS3动画效果

CSS3动画效果

animation-name用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes 规则。CSS 加

载时会应用 animation-name 指定的动画，从而执行动画。

animation-duration用来设置动画播放所需的时间

animation-timing-function用来设置动画的播放方式

animation-delay用来指定动画的延迟时间

animation-iteration-count用来指定动画播放的循环次数

animation-direction用来指定动画的播放方向

animation-play-state用来控制动画的播放状态

animation-fill-mode用来设置动画的时间外属性

animation以上的简写形式

animation-timing-function

ease默认值，元素样式从初始状态过渡到终止状态时速度由

快到慢，逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0)

linear元素样式从初始状态过渡到终止状态速度是恒速。等同

于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease-in元素样式从初始状态过渡到终止状态时，速度越来越

快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,1.0, 1.0)

元素样式从初始状态过渡到终止状态时，速度越来越

ease-out慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.51.0)

ease-in-out元素样式从初始状态过渡到终止状态时，先加速，再减

速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier自定义三次贝塞尔曲线

anim