如何定義和調用動畫

.myClass{
-webkit-transform:rotate(90deg); //使旋轉結束后保持旋轉的角度不變
-webkit-animation: animation 6s; //調用animation動畫 在6秒內執行結束
// -webkit-animation: animation 6s infinite;  增加 infinite 表示循環動畫。
}</code></pre>

<pre><code>@-webkit-keyframes animation{
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(3330deg) } //定義旋轉動畫

//也可以通過百分比指定各個時間執行什么動畫
@-webkit-keyframes animation{
0%{ left: 60px; opacity: 0;}
86% { left: 60px; opacity: 0;}
100% { left: 110px; opacity: 1;}
}
}

js 調用動畫

$(el).addClass("myClass"); // so easy

js 捕獲動畫事件

 1、-webkit-animation動畫其實有三個事件：　　　　　　
　　　　　　開始事件 webkitAnimationStart
　　　　　　結束事件  webkitAnimationEnd
　　　　　　重復運動事件 webkitAnimationIteration
　2、  css3的過渡屬性transition，在動畫結束時，也存在結束的事件：webkitTransitionEnd;
　　　　　　注意：transition,也僅僅有這一個事件。
　　　
 var tt =  $(el).find('.myCanvas')[0];
 tt.addEventListener("webkitAnimationStart", function(){
 //動畫開始時事件
    console.log(1);　　//動畫開始時，控制臺輸出1
 }, false);
 tt.addEventListener("webkitAnimationEnd", function(){
 //動畫重復運動時的事件
 console.log(3);　　//第一遍動作完成時，控制臺輸出3
 }, false);

多次執行同一個 animation

需要在addClass之前先removeClass。
但又不能直接

removeClass(myClass);
addClass(myClass);

需要有一點時間間隔
比如在“webkitAnimationEnd”事件觸發時移除class，
或者

removeClass(myClass);
    setTimeout(function(){
    addClass(myClass);
},50);//時間好像為0都可以

一段實用的事件兼容代碼

//動畫事件兼容
var VENDORS = ["Moz",'webkit','ms','O'];
var TRANSITION_END_NAMES = {
    "Moz" : "transitionend"
    ,"webkit" : "webkitTransitionEnd"
    ,"ms" : "MSTransitionEnd"
    ,"O" : "oTransitionEnd"
}
var ANIMATION_END_NAMES = {
    "Moz" : "animationend"
    ,"webkit" : "webkitAnimationEnd"
    ,"ms" : "MSAnimationEnd"
    ,"O" : "oAnimationEnd"
}
var ANIMATION_START_NAMES = {
    "Moz" : "animationStart"
    ,"webkit" : "webkitAnimationStart"
    ,"ms" : "MSAnimationStart"
    ,"O" : "oAnimationStart"
}
var css3Prefix,TRANSITION_END_NAME,ANIMATION_END_NAME,ANIMATION_START_NAME;
var mTestElement = document.createElement("div");

for (var i = 0,l = VENDORS.length; i < l; i++) {
    css3Prefix = VENDORS[i];
    if ((css3Prefix + "Transition") in mTestElement.style) {
        break;
    }
    css3Prefix = false;
}

if(css3Prefix) {
    TRANSITION_END_NAME = TRANSITION_END_NAMES[css3Prefix];
    ANIMATION_END_NAME = ANIMATION_END_NAMES[css3Prefix];
    ANIMATION_START_NAME = ANIMATION_START_NAMES[css3Prefix];
}

一些常見的api

rotate(360deg) 旋轉

scale(1,1) 放大縮小比例

translate(x,y) 平移

skew() 坐標系旋轉？

div {
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
    transform: skew(30deg,20deg);
}

matrix() 包括以上所有的樣子，估計用不到

div {
    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */
    transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}