css3动画系列之@keyframes规则

html5+css3出现以后，很多优秀的动画效果因为个别主流浏览器不支持的原因，被使用的很少，现在很多做微营销的公司，很多产品是在微信里浏览和使用，微信默认浏览器支持的都是webkit内核，所有很多css3的特性都是支持的，可以大胆使用，尤其是一些动画样式，今天主要介绍一下css3的动画@keyframes规则：

 

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

css代码：

div{

     width:200px;

     height:200px;

     background:red;

     animation:case 5s; /* 5秒钟执行一次这个动画case */

  }

/*常见动画规则case为背景色由红色变为蓝色*/

@-webkit-keyframes case{
   from{ background:red; }
       to{ background:blue; }

    }

 

将以上css代码加入到页面中就可以看到效果啦O(∩_∩)O

 

注：@keyframes一定要结合animation才能实现动画效果animation，animation其他文章会详解介绍。

          

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

 

Chrome 和 Safari 需要前缀 -webkit-

Firefx需要前缀：-moz-

Opera：-o-