如何定義和調(diào)用動畫
.myClass{
-webkit-transform:rotate(90deg); //使旋轉(zhuǎn)結(jié)束后保持旋轉(zhuǎn)的角度不變
-webkit-animation: animation 6s; //調(diào)用animation動畫 在6秒內(nèi)執(zhí)行結(jié)束
// -webkit-animation: animation 6s infinite; 增加 infinite 表示循環(huán)動畫科阎。
}</code></pre>
<pre><code>@-webkit-keyframes animation{
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(3330deg) } //定義旋轉(zhuǎn)動畫
//也可以通過百分比指定各個時間執(zhí)行什么動畫
@-webkit-keyframes animation{
0%{ left: 60px; opacity: 0;}
86% { left: 60px; opacity: 0;}
100% { left: 110px; opacity: 1;}
}
}
js 調(diào)用動畫
$(el).addClass("myClass"); // so easy
js 捕獲動畫事件
1给猾、-webkit-animation動畫其實有三個事件：
開始事件 webkitAnimationStart
結(jié)束事件 webkitAnimationEnd
重復運動事件 webkitAnimationIteration
2、 css3的過渡屬性transition洪鸭，在動畫結(jié)束時撤逢，也存在結(jié)束的事件：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);
多次執(zhí)行同一個 animation
需要在addClass之前先removeClass。
但又不能直接
removeClass(myClass);
addClass(myClass);
需要有一點時間間隔
比如在“webkitAnimationEnd”事件觸發(fā)時移除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) 旋轉(zhuǎn)
scale(1,1) 放大縮小比例
translate(x,y) 平移
skew() 坐標系旋轉(zhuǎn)种冬？
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);
}