トランジションとアニメーション

@(HTML 5)[トランジション、アニメーション]
[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  ： obj.addEventListener('webkitTransitionEnd',function(){});
  :  obj.addEventListener('transitionend',function(){});

アニメーション(Animation)

animation: name duration delay timing-function iteration-count direction;

animation-name:アニメーション名
keyframenameカスタム名noneアニメーション効果なし
animation-duration:アニメーション実行時間animation-delay:アニメーション効果遅延時間animation-timing-function:アニメーション速度曲線
linear/ease/ease-in/ease-out/ease-in-out
animation-iteration-count:アニメーション実行回数
回数数値/infinite無限繰返し
animation-direction:アニメーション実行方向
normal通常/alternateアニメーションを順番に逆再生
animation-play-state:アニメーション実行状態
pausedアニメーションの一時停止/runningアニメーションの実行
animation-fill-mode:アニメーション実行プロセスの効果が表示されるかどうか
noneは変更しない(デフォルト)forwardsアニメーションが完了した後、最後のアトリビュート値(最後のキーフレームで定義)backwardsをanimation-delayで指定した時間内に、アニメーション表示の前に(最初のキーフレームで定義)bothを適用して前後にモードを塗りつぶし、forwardsとbackwardsの

@keyframes:    
@keyframes animationname {keyframes-selector {css-styles;}}

animationnameアニメーションの名前を定義します.keyframes-selectorアニメーションの長さのパーセント.
0～100%from(0%と同じ)to(100%と同じ)toのみ
css-styles 1つ以上の合法的なCSSスタイルプロパティ.

    ：

      ：obj.addEventListener("webkitAnimationStart", fn);
obj.addEventListener("animationstart", fn);
         ：  obj.addEventListener("webkitAnimationIteration", fn);
obj.addEventListener("animationiteration", fn);
      :obj.addEventListener('webkitAnimationEnd',fn);
obj.addEventListener('animationend',fn);

HTML 5のrequestAnimationFrameアニメーション最適化

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();