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-

?