CSS3动画简单应用

CSS3中的动画之前接触过，实际项目中并没用过，因为做的动画大多都要计算一些变量，又没有用less等预处理语言，所以基本上都是用js写的动画。今天又回顾了一下CSS3动画，感觉还是有些场景可以用到的，方便自己回看记忆，写下CSS3动画的简单用法。

首先我们要先声明动画，写法如下：

@keyframes change{
   0%{
      background:#fff;
      margin-left:10px;
   }
   25%{
      background:#f00;
      margin-left:25px;
   }
   50%{
      transform:rotate(720deg);
   }
   100%{
      background:#00f;
      margin-left:100px;
   }
}

change为动画的名称，我们用百分号来表示这个动画的进程，即到25%时动画过渡到什么样子，到50%时过渡到什么样子，可以根据自己的需求来进行定义。当然考虑到浏览器的兼容性，我们可以加上一些前缀，比如：

谷歌的Chrome浏览器和苹果的Safari浏览器

@-webkit-keyframes change{
   0%{
      background:#fff;
      margin-left:10px;
   }
   25%{
      background:#f00;
      margin-left:250px;
   }
   50%{
      transform:rotate(720deg);
   }
   100%{
      background:#00f;
      margin-left:800px;
   }
}

Opera欧朋浏览器

@-o-keyframes change{
   0%{
      background:#fff;
      margin-left:10px;
   }
   25%{
      background:#f00;
      margin-left:25px;
   }
   50%{
      transform:rotate(720deg);
   }
   100%{
      background:#00f;
      margin-left:100px;
   }
}

Firefox火狐浏览器

@-moz-keyframes change{
   0%{
      background:#fff;
      margin-left:10px;
   }
   25%{
      background:#f00;
      margin-left:250px;
   }
   50%{
      transform:rotate(720deg);
   }
   100%{
      background:#00f;
      margin-left:800px;
   }
}

这样就可以兼容一些主流的浏览器了。

定义好动画之后，我们只要在样式文件中给元素加上这个动画样式就可以了，如下：

animation-name:change;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;

上面代码中，对应含义如下：

animation-name                     要引用的动画名称

animation-duration                动画持续的时长

animation-timing-function    动画的速度曲线

animation-delay                     动画的延迟执行时间

animation-iteration-count     动画执行的次数

animation-direction               动画是否在下一周期逆向播放

另外还有几个属性可以定义:

animation-play-state             规定动画是在运行还是停止状态

animation-fill-mode               规定动画执行完之后的状态

这样样式的属性也可以合起来写成animation属性，如下：

animation:change 5s linear 0s infinite alternate;

这样我们就可以用CSS3的animation写出简单流畅的动画了。

兼容性如下：

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。