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-
