@(HTML5)[過渡, 動畫]
[TOC]
五堕扶、過渡與動畫
過渡
transition：property duration delay timing-function
transition-property：過渡屬性的名稱
none：沒有過渡屬性
all：所有的屬性都過渡(默認值)
property：具體的屬性名稱
transition-duration：過渡屬性花費的時間 s/ms
transition-delay：過渡效果延時時間 s/ms
transition-timing-function：過渡效果速度曲線linear / ease / ease-in / ease-out / ease-in-out
過渡完成事件：
Webkit內(nèi)核： obj.addEventListener('webkitTransitionEnd',function(){});
標準: obj.addEventListener('transitionend',function(){});
動畫
animation: name duration delay timing-function iteration-count direction;
animation-name: 動畫名稱
keyframename 自定義的名字
none 無動畫效果
animation-duration: 動畫執(zhí)行時間
animation-delay:動畫效果延遲時間
animation-timing-function: 動畫速度曲線linear / ease / ease-in / ease-out / ease-in-out
animation-iteration-count: 動畫執(zhí)行次數(shù)
次數(shù)數(shù)值 / infinite無限重復(fù)
animation-direction:動畫執(zhí)行方向
normal正常/alternate 動畫輪流反向播放
animation-play-state:動畫執(zhí)行狀態(tài)
paused 暫停動畫 / running 運行動畫
animation-fill-mode:動畫執(zhí)行過程效果是否可見
none 不改變（默認）
forwards 當(dāng)動畫完成后，保持最后一個屬性值（在最后一個關(guān)鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內(nèi)绷落，在動畫顯示之前，應(yīng)用開始屬性值（在第一個關(guān)鍵幀中定義）
both 向前和向后填充模式都被應(yīng)用赶站，forwards 與backwards 的
@keyframes:規(guī)定動畫
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 定義動畫的名稱戳寸。
keyframes-selector 動畫時長的百分比。0-100%
from（與 0% 相同）
to（與 100% 相同）
可以只有to
css-styles 一個或多個合法的 CSS 樣式屬性郑诺。
動畫事件：
動畫開始觸發(fā)：obj.addEventListener("webkitAnimationStart", fn);
obj.addEventListener("animationstart", fn);
動畫執(zhí)行過程中觸發(fā)： obj.addEventListener("webkitAnimationIteration", fn);
obj.addEventListener("animationiteration", fn);
動畫結(jié)束觸發(fā):obj.addEventListener('webkitAnimationEnd',fn);
obj.addEventListener('animationend',fn);
HTML5中的requestAnimationFrame動畫優(yōu)化
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();