-webkit-transform定義了元素的變形，-webkit-transition定義了元素的屬性變化樣式，-webkit-animation與-webkit-keyframes則真正的讓元素動起來（不只是變到什么狀態，更定義了中間過程）讓元素動起來 -webkit-animation定義一段動畫屬性，比如名字，持續時間，當前狀態等。-webkit-keyframes則對每一個動畫定義時間軸，可以設置某個時間動畫作用的元素是什么狀態。-webkit-keyframes rotateA 0% -webkit-transform: rotateY(0deg);100% -webkit-transform: rotateY(360deg); #circle -webkit-animation-name: rotateA; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;- 上面的代碼中，定義了元素#circle的動畫屬性：名字是rotateA等。-webkit-keyframes rotateA 針對name是rotateA的動畫設置時間軸：0%位置時什么樣，100%位置時什么樣。css3 animation的所有屬性及詳細解釋在/TR/css3-animations/-webkit-keyframes test 0% left: 50px; top: 100px; 100% left: 200px; top: 100px; webkit內核瀏覽器實現蒙版遮罩和動畫效果熟悉photoshop的同學都知道，它里面有蒙版遮罩層的效果，在webkit內核的瀏覽器中同樣可以實現。在本文中我將使用以下幾個標簽，來實現圖層蒙版和動畫效果。-webkit-mask-webkit-mask屬性非常強大，它讓為一個元素添加蒙板成為可能，這和ps里面的蒙板功能是一樣的。如下例所示：背景圖片：蒙版層：css樣式：.img-webkit-mask:url(002.png);html代碼：最終效果如下：蒙版除了用半透明的png圖片，還可以用它自身的樣式來實現，如下例所示，當它的alpha值為0的時候會覆蓋下面的元素，為1的時候會完全顯示下面的內容。css樣式：.img-webkit-mask:-webkit-gradient(linear,0% 0%, 0% 100%, from(rgba(0,0,0,1), to(rgba(0,0,0,0);最終效果：漸變的寫法具體參考css3實現背景顏色線性漸變。-webkit-mask-position:移動的蒙版-webkit-mask還有另外一個重要屬性，它可以設置蒙版的位置，下面我們通過一個例子來講述一下：css樣式：.img-webkit-mask:url(002.png);-webkit-mask-position:0 0;.img:hover-webkit-mask-position:-83px -83px;html樣式不變，最終效果如下(左邊為正常狀態，右邊為鼠標移動上去的狀態)：這里，我們還可以用-webkit-animation來制作自動移動的蒙版，復制下面的代碼，自行進行測試：無標題文檔-webkit-keyframes wipe 0% -webkit-mask-position:0 0; 100% -webkit-mask-position:-170px 0;.img -webkit-mask:url(/wp-content/uploads/2011/12/002.png);-webkit-animation:wipe 6s infinite;-webkit-animation-delay:0;-webkit-animation-direction:alternate;.img:hover 現在大概來說一下里面用到的屬性：-webkit-animation：定義一段動畫屬性，比如上面用到的名字（wipe）、持續的時間（6s）、循環次數（infinite無限循環）、延續時間(delay)、方向（direction）。-webkit-keyframes：則對每一個動畫定義時間軸，可以設置某個時間動畫作用的元素是什么狀態。里面分別設置了0%時是什么位置，100%時是什么位置。在animation的keyframes里, 每一幀不會默認繼承前一幀的屬性, 所以: Javascript代碼 1. -webkit-keyframestest 2. 0%left:50px;top:100px; 3. 100%left:200px; 4. -webkit-keyframes test 0% left: 50px; top: 100px; 100% left: 200px; 不等于 Javascript代碼 1. -webkit-keyframestest 2. 0%left:50px;top:100px; 3. 100%left:200px;top:100px; 4. -webkit-animation:仍舊是一個復合屬性，-webkit-animation: name duration timing-function delay iteration_count direction;包括以下幾個屬性（1） -webkit-animation-name 這個屬性的使用必須結合-webkit-keyframes一起使用eg: -webkit-keyframesfontchange0%font-size:10px;30%font-size:15px;100%font-siez:12px;百分比的意思就是duration的百分比，如果沒有設置duration的話，則表示為無窮大div -webkit-animation-name:fontchange;（2）-webkit-animation-duration 表示動畫持續的時間（3）-webkit-animation-timing-function 表示動畫使用的時間曲線【語法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out（4）-webkit-animation-delay 表示開始動畫之前的延時【語法】 -webkit-animation-delay: delay_time;（5）-webkit-animation-iteration-count 表示動畫要重復幾次【語法】-webkit-animation-iteration-count: times_number;（6） -webkit-animation-direction 表示動畫的方向【語法】-webkit-animation-direction: normal(默認) | alternatenormal 方向始終向前alternate 當重復次數為偶數時方向向前，奇數時方向相反【另外】跟animation有關的其他屬性（1）-webkit-animation-fill-mode : none (默認)| backwards | forwards | both 設置動畫開始之前和結束之后的行為（測試結果不是很清晰）（2）-webkit-animation-play-state: running（默認） | paused 設置動畫的運行狀態綜合案例：-webkit-keyframes fontbulger 0% font-size: 10px;30% font-size: 15px;100% font-size: 12px;#box -webkit-animation-name: fontbulger;-webkit-animation-duration: 1s;-webki