CSS 动画

属性	说明	版本
@keyframes	定义一个动画。	CSS3
animation	复合属性。设置对象动画特效。	CSS3
animation-name	设置动画名称(动画名称由@keyframes定义)	CSS3
animation-duration	设置动画的持续时间	CSS3
animation-timing-function	设置动画的过渡类型	CSS3
animation-delay	设置动画的延迟播放时间	CSS3
animation-iteration-count	设置动画的循环次数	CSS3
animation-direction	设置动画在循环中是否反向运动	CSS3
animation-fill-mode	设置当动画完成或还未开始播放时，要应用到元素的样式。	CSS3
animation-play-state	设置动画是暂停还是播放状态	CSS3

浏览器支持：

@keyframes

使用@keyframes规则，可以创建动画。动画是css样式的变化过程，创建动画就是逐步改变CSS样式。

创建动画时使用％，或关键字"from"和"to"指定样式变化，0％是开头动画，100％是当动画完成。

语法：

@keyframes name {
      /*name  定义动画的名称。*/
   selector {
          /*值 0-100% 或 from (和0%相同)， to (和100%相同)*/
     css-styles;    /*一个或多个合法的CSS样式属性*/
  }
}

基本用法示例：

@keyframes mymove{
   
  from {
   top:0px;}  /*等同：0%{ top:0px; } */
  to {
   top:200px;}  /*等同：100%{ top:200px; } */
}

/* 兼容低版本浏览器 */
@-webkit-keyframes mymove {
   
  from {