CSS3动画

CSS3动画概述

CSS3动画animation和CSS3过渡transition十分类似，都是通过改变元素的属性来实现一段动画。二者的区别在于：

• 过渡是元素从初始样式到结束样式的平滑转换，其前后元素的变化只有2个状态，transition属性调用的是变化的属性名称。

• 动画则是通过插入多个（>=2个）类似于Flash里的关键帧来声明一个动画，每个关键帧内书写着元素不同时刻的样式，animation属性调用的是通过@keyframes声明的动画名称。
  
  
  

@keyframes声明动画的方法

声明格式如下：

@keyframes AnimationName{
    0%(from){
        /*CSS样式*/
    }
    30%){
        /*CSS样式*/
    }
    ...
    60%){
        /*CSS样式*/
    }
    100%(to){
        /*CSS样式*/
    }   
}

兼容性

• 主流浏览器对@keyframes的支持还是比较好的，IE系列在IE9及以下版本不支持。针对早期的浏览器版本，要正常使用@keyframes的话需要添加各自的浏览器私有前缀。
  
  
• 为@keyframes添加私有前缀有点特殊，正确的写法是：
  
  • @-webkit-keyframes
  • @-moz-keyframes
  • @-o-keyframes

animation属性包含8个子属性

• animation-name：通过@keyframes声明的动画名称（取值：none/动画名称）

• animation-duration：执行动画的周期时长（单位：S，取值为0/负值等于没有动画效果）

• animation-timing-function：动画执行函数（过程的速度变化，可使用的关键词和transition的是一样的）

• animation-delay：动画开启前的延迟时长

• animation-iteration-count：动画播放的次数（默认值为1，若取值infinite，动画会无限循环播放）

• animation-direction：动画播放的方向（默认值为normal，若取值为alternate，动画执行到偶数次时会反转播放方向）

• animation-play-state：动画的播放状态（默认值为running，若取值为paused，动画会暂停播放。暂停状态下元素的样式会回到初始状态，恢复播放时会从暂停处开始）

• animation-fill-mode：动画的时间外属性

  • 默认值：none：不设置对象动画之外的状态；
  • forwards：设置动画结束后状态为动画结束时的状态
  • backwards：设置动画结束后状态为动画开始时的状态
  • both：设置动画结束后状态为动画开始或结束的状态
    
    
    

兼容性

• animation属性在IE9及以下版本不被支持。
  
  
• animation属性在实际运用中，也需要添加各大主流浏览器的私有前缀：
  
  • -webkit-animation
  • -moz-animation
  • -o-animation
    
    

注意事项

animation属性和transition一样是复合属性，因此，animation属性内可以一次性书写多个动画序列实现同时调用。
如：animation: animation1 2s ease 0s forwards, animation2 2s linear 2s backwards;