IE10+，Firefox，Opera 支持@keyframes 規則
Chrome Safari 需要前綴 -webkit-@keyframes
註釋：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。
創建動畫
1 @keytframes 動畫選擇器 （定義動畫的過程
1 from{}tp{} 表示:0%{}100%{}
2 指定變化過程 0%{}20%{}40%{}80%{}100%{}
）
2 動畫選擇器 （
必選項：
規定動畫的名稱
規定動畫的時長 默認時長是0 不設置的話 不會有動畫
）
css3 所有動畫屬性
@keyframes 規定動畫。 3
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 3
animation-name 規定 @keyframes 動畫的名稱。 3
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0。 3
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。 3
屬性說明:
animation-timing-function 使用名爲三次貝塞爾（Cubic Bezier）函數的數學函數，來生成速度曲線。您能夠在該函數中使用自己的值，也可以預定義的值：
linear 動畫從頭到尾的速度是相同的。
ease 默認。動畫以低速開始，然後加快，在結束前變慢。（緩衝運動）
ease-in 動畫以低速開始。
ease-out 動畫以低速結束。
ease-in-out 動畫以低速開始和結束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
animation-delay 規定動畫何時開始。默認是 0。 3
animation-iteration-count 規定動畫被播放的次數。默認是 1。 3
animation-direction 規定動畫是否在下一週期逆向地播放。默認是 "normal"。 3
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。 3
animation-fill-mode 規定對象動畫時間之外的狀態。
==================================
根據以上的介紹css3依然無法完成令人滿意的效果，css3的動畫還包括一些高級特性
變形 IE 10+ Firefox 3.5+ Opera 11.50+ Safari 10+ Chrome 2.0+
1 transform(基本的變形 需要指定過渡方式)
transform: none | <transform-function>[<transform-function>]*
取值：
none:表示不進行變換；
<transform-function>:表示一個或多個變換函數，以空格分開，因此可以同時對一個元素進行transform的多種屬性操作。
1.rotate(<angle>):旋轉元素
2.scale(<number>[, <number>]):縮放元素
3.translate(<translation-value>[, <translation-value>]):移動元素
4.skew(<angle> [,<angle>]):傾斜元素
5.matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩陣變形
6.perspective(length):透視
2 過渡 transition
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。
Safari 支持替代的 -webkit-transition 屬性。
transition: property duration timing-function delay;
-webkit-transition:property duration timing-function delay;
property:規定設置過渡效果的 CSS 屬性的名稱。
duration:規定完成過渡效果需要多少秒或毫秒
timing-function:規定速度效果的速度曲線。
delay:定義過渡效果何時開始。
上面說了那麼多，那麼問題來了。transition 和 animation 之間是什麼關係?
感覺兩個重合了，
transition屬性是一個簡單的動畫屬性，非常簡單非常容易用。
可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。animation可以做更加精細的動畫：
給元素加上動畫樣式 他會執行動畫，但不會監聽樣式屬性，也就是某一個樣式屬性改變時不會觸發動畫
給元素加上transtion樣式時 會監聽指定的樣式屬性，當屬性改變的時候會觸發過度效果
transform只是靜態的變化，不涉及動畫。只有添加了變形的過渡屬性監聽，纔會有動畫
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html;charset=utf-8">
<title>css3動畫效果</title>
<script src="../config/js/jquery.js"></script>
<style>
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
/*基本的動畫*/
#div1
{
/*定義動畫的名稱*/
animation-name: myfirst;
-webkit-animation-name: myfirst;
-moz-animation-name: myfirst;
-ms-animation-name: myfirst;
/*動畫時長*/
animation-duration: 5s;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5ms;
/*速度曲線函數：速度曲線用於使變化更爲平滑*/
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
/*動畫延時*/
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */
/*動畫的循環次數*/
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite; /* Safari 和 Chrome */
}
.demo_rotate{
-webkit-transition:1s ease all;
-moz-transition:1s ease all;
padding:10px;
margin:90px auto;
background: #f00;
}
.demo_rotate:hover{
-webkit-transform:rotate(360deg) scale(1.2,1.2);
-moz-transform:rotate(360deg) scale(1.2,1.2);
background:#ff9900;
}
/*
測試移動動畫
*/
/*
transition
*/
.a-auto-3{
transition:all 0.8s ease-in-out;
-moz-transition:all 0.8s ease-in-out;
-ms-transition:all 0.8s ease-in-out;
-webkit-transition:all 0.8s ease-in-out;
}
.a-element-13{left:1998px; top:0px; opacity:0; z-index:1;}
.a-element-13-a{left:350px; top:0px; opacity:1; }
.a-element{ position:absolute; display:block;}
</style>
</head>
<body>
<div id="div1" style="width: 100px;height: 100px;"></div>
<!--
<div class="demo_rotate" style="width: 100px;height: 100px;"></div>
-->
<img src="img-15.jpg" class="a-element a-element-13 a-auto-3 " >
<script>
$(function(){
$(".a-element").addClass("a-element-13-a");
})
</script>
</body>
</html>