Css3 动画

逐帧动画：组成动画的每一个画面就是一个帧（也是关键帧动画，每一帧都是关键帧，没有过度帧生成部分）

关键帧动画：将动画的第一帧和最后一帧设置为关键帧，其他部分由系统完成(过度帧自动生成)。

@keyframes规则

animation属性

 

webkit内核的浏览器

　　webkit内核的浏览器需要加-webkit-前缀（safari、charme浏览器）

　　　　@-webkit-keyframes规则

　　　　-webkit-animation 属性

　　　　IE9或IE9以下浏览器不支持css3 动画

一个简单的例子：

div{
  width：50px；
  height：100px；
  background-color：green；
}

@keyframes mybox{                    //mybox  是我们为这个关键帧起的名字 
  from{width：50px；}                 //from和to  定义  开始和结尾关键帧
  to{width：200px；}
}

@-webkit-keyframes mybox{                    //兼容谷歌浏览器
  from{width：50px；}                 
  to{width：200px；}
}

接下来我们在div上使用hover属性来开始动画

div：hover{
  -webkit-animation：mybox；                        //使用前定义动画名称
  -webkit-animation-duration：2s；      //持续时间
}

使用百分比定义关键帧

@-webkit-keyframes mybox{
  0%{width:50px; height:100px;}                               定义第一帧宽50px 高100px     0%  50%  100%  代表时间百分比
  50%{width:200px;height:100px;}　　　　　　　　　　　　　　　　　　定义第二帧宽200px 高100px
  100%{width:200px; heiht:200px;}　　　　　　　　　　　　　　　　　 定义第三帧宽200px 高200px           这个动画就是先变长在变高
}

div:hover{
  -webkit-animation:mybox;
  -webkit-animation-duration:2s;
}

时间函数（ease-in-out  曲线图）

　　animation-timing-function

　　-webkit-animation-timing-function

延迟时间

　　animation-delay

　　-webkit-animation-delay

　

动画指定的次数

　　animation-iteration-count：正整数|infinite(无限的)；

动画播放的方向

　　animation-diraction：narmal|reverse|alternate|alternate-reverse；

　　　　narmal：默认值。正常播放

　　　　reverse：动画反向播放

　　　　alternate：交替（第一次正常，第二次反向。。。。。）

　　　　alternate-reverse：第一次反向播放，第二次正常播放。

 动画播放前后的状态

@-webkit-keyframes mybox{
  0%{transform：translate（0，200px）;}                     
  50%{transform:translate(200px,0);}
  100%{transform:translate(200px,200px);}
}

div{
  width:50px;
  height:50px;
  background-color:green;
  -webkit-animation-name:mybox;
  -webkit-animation-duration:2s;
  -webkit-animation-delay:2s;
}

animation-fill-mode：none|backwards|forwards|both

　　none：默认值，播放完成后回到原始位置

　　backwards：设置播放之前的元素状态和第一个关键帧相同

　　forwards：设置播放动画之后的元素状态和最后一个关键帧相同

　　both：backwards和foreards的结合

控制动画运行和暂停

　　animation-play-state：running|paused

　　　　running：默认值：停止或暂停的动画继续播放

　　　　paused：正在播放的动画暂停播放