CSS3アニメーションテーマ

一遷移

　　1、スタイルが変更される遷移元素は、遷移アニメーションの要素を追加します。

1.1、遅延の遷移遅延時間、どのくらいのアニメーションの遅延実行（S |ミリ秒）デフォルト0

1.2、遷移期間アニメーションするとき、どのくらいのアニメーションが完了した（S |ミリ秒）デフォルト0

1.3、すべてのアニメーションするスタイルデフォルト遷移プロパティ

1.4、遷移タイミング機能アニメーション

1.4.1、等速直線

1.4.2、容易バッファ（デフォルト）

1.4.3、使いやすさの加速度

1.4.4、容易にアウト減速

1.4.5、容易・イン・アウトを加速し、その後減速します

1.4.6、立方ベジェ（）

上記缶ベジェ曲線運動 https://cubic-bezier.com/ 決定されたパラメータ

図2に示すように、ディスプレイによって表示されていない要素は、ページ要素のレンダリングが完了する前に、プロセス要素をレンダリングした、トランジション効果は余裕がないこと、遅延を追加することが可能です

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル>
        高さ：100pxに。
        トランジション：2S ; 
        背景色：赤。
    } 
    </ スタイル> 
</ ヘッド> 
< 身体> 
    <！ - トランジション在使用时的问题- > 
    < divのID = "transitionTips" スタイル= "表示：なし" > 

    </ divの> 
    < ボタンのID = "showTipsBtn " >显示transitionTips </ ボタン> 

    <
    VAR showTipsBtn = document.querySelector（" #showTipsBtn " ）; 
    showTipsBtn.onclick = 関数（）{
         VAR transitionTips = document.querySelector（" #transitionTips " ）;
         IF （transitionTips.style.displayが== " なし" ）{
             // 要素は、ディスプレイによって表示されていないが、遅延を追加することが可能である、トランジション効果は余裕がないこと、ページ要素のレンダリングが完了する前に、プロセス要素をレンダリングした
        //      transitionTips.style.display =「ブロック」; 
        // transitionTips.style。 =幅"500pxなど"; 
        transitionTips.style。ディスプレイ=「ブロック」。
        setTimeout（関数（）{ 
        transitionTips.style.width = " 500pxなど" ; 
        }、500 ）。
        } 他{ 
            transitionTips.style.width = " 100pxに" 。
            transitionTips.style.display = 「なし」。
        } 
    } 
    </ スクリプト> 
</ ボディ> 
</ HTML >

3、transitionendイベント・モニター・エレメントは、アニメーションが終了したのトランジション

testTransition.addEventListener（ 'transitionend'、関数（）{ 
アラート（ "アニメーション実行" ）; 
}）;

二、アニメーション

　　1、

おすすめ