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-
?
