CSS3のトランジションやアニメーション

トランジショントランジション

1.定義遷移の使用

転移性の欠如、元素変化の特性値において、ブラウザは、瞬時に新しいプロパティ値にレンダリングこのスタイルの一つの要素であろう。例えば、位置決め要素のトップ：0、トップへの動的な変更：100pxに、この要素は即座に、時には我々は古いから、特定の視覚的効果を達成するために持っている一定の期間内に、アニメーションの形でそれをしたい、場所100pxにに行きます新しいスタイルにスタイル、そしてこのプロセスは、遷移です。トランジションは、実際に簡単なアニメーション効果であります

遷移が速記name属性がされた後、それは、ある、実際には4つの属性の合併であるために：
トランジション・プロパティ：トランジションのプロパティ（デフォルトはAllです）
遷移DURATION：トランジションの継続時間（デフォルトは0です）
transiton -timing機能：遷移関数（既定の容易さの関数）
遷移遅延：遷移の遅延時間（デフォルトは0です）

注意：追加するには、彼のプロパティの値は、このような色、左、幅などの明確な値を持っていなければならない属性、およびこの表示は無効である場合

私たちはしばしば省略、スプリット遷移をめったに使用しない
すべての属性の移行を

transition: all 1s;

遷移複数の属性、カンマで区切られた各属性

transition: width 1s,height 1s;

遅延やトランジション機能を設定します

transition: width 2s ease 1s;

時間の2遷移関数

一般的な値は次のとおりです。
EASE -後遅く
リニア-制服の
使いやすさで-最初のスロー絶食後
のステップ-遷移時間同じサイズに時間が経過した後に実行するには、踊りに行く人気があります

例として、次のコードで

transition: width 2s steps(4);

3.transitionイベント

transitionend -移行が完了した後にこのイベントがトリガされた
transitionstart -遷移が、このイベント（唯一の遅延の後に実行）をトリガします開始
注：addaddEventListenerでイベントを追加することができ、プロパティ割り当て機能モニターの形式をサポートしていません。

<script>
    var div = document.querySelector("div")
    var scale = true
    div.onclick = function(){
        if(scale){
            div.style.width = "400px"
        }else{
            div.style.width = "200px"
        }
        scale = !scale
    }
    
    // 这个方式监听不支持
    div.transitionend = function(){
        console.log("过渡结束了")
    }

    // 下面的写法才支持
    div.addEventListener("transitionend",function(){
        console.log("过渡结束了")
    })
    div.addEventListener("transitionstart",function(){
        console.log("过渡开始了")
    })
</script>

遷移特性の数に関する遷移プロパティによってトリガ遷移イベントの数。遷移が数回をトリガするいくつかの属性があります。

transition: width 2s,height 1s;

div.addEventListener("transitionend",function(){
        console.log("过渡结束了") //触发两次
    })

遷移は、境界幅等価ボーダートップ幅と複合プロパティ属性である場合、境界底幅、境界、左幅、これらの4つのプロパティの境界右幅を設定します。遷移イベントトリガ4回

アニメーション

1.定義アニメーション

アニメーションは、多段の複数のセットとして理解することができ、プロセスは、パターン変更をキーフレームを提供することによって制御されます。例えば、200pxのから600PXへの遷移の要素の幅は、開始点と終了点は、イベント機能、速度制御スタイルの変更を変更するよりも何も固定されていません。スタイルは、常にそれが範囲200〜800のうち、不可能であり、この段階での方向に動いています。アニメーションは複数のキーフレームは、視覚アニメーションの効果を達成するために、異なる時間パターンに要素を制御するために設けられていてもよいです

2.登録アニメーション

アニメーションアニメーションは、名前を作成することで作成し、キーフレームの複数の制御要素パターン異なる期間の方向の変化が提供される
キーフレームの割合は、代表的な0％から100％の代表に、/からも使用することができます

@keyframes move {
    0% {
        left: 20px;
        top: 20px;
    }

    40% {
        left: 600px;
        top: 0;
    }

    80% {
        left: 600px;
        top: 400px;
    }

    100% {
        left: 300px;
        top: 200px;
    }
}

3.アプリケーションのアニメーション

構文：アニメーション：アニメーション名期間

.item{
    animation: move 3s;
}

4.残りのプロパティ

アニメーション名：アニメーションの名前
アニメーション持続時間：持続時間単位/秒
のアニメーション遅延：遅延ユニット/秒
のアニメーションタイミング機能：時間曲線
アニメーション反復カウント：サイクル数無限無限回
nimation方向：アニメーションの方向
アニメーション-fillモード：アニメーションが完了した場合、または適用されるアニメーションの遅延、あるルール

分析：
一度だけアニメーションデフォルト、あなたは、無限ループの実行に行くアニメーション反復カウントを設定する場合：無限

animation: move 3s infinite;

代替：デフォルトのアニメーションは、あなたが前後に代替を設定したい場合は、アニメーションの方向を設定し、サイクルのセット数、アニメーションはまだ一方向に使用される場合であっても、一つの方向に実行されます

animation: move 3s infinite alternate;

アニメーションの最後には、デフォルトのスタイルに戻ります後は、そのような先の例のように、アニメーションの終了位置は300200ですが、あなたは、アニメーション・フィル・モードのプロパティ数を設定する場合、それはすぐに、アニメーションに入る前に0,0の位置に戻ることができ値を選択することができる：
-アニメーションの元のスタイルに戻って完全な（デフォルト）のいずれもが、
アニメーションの最後の状態に留まる-転送し
、後方-アニメーションの遅延がある場合、要素は直ちにスタイルをレンダリングします0％に設定
両方：（前方の等価+後方）に予約されています

animation: move 6s 1s 2 both;

JSによる再生コントロール

jsが再生を制御するためのアニメーションプレイ状態のプロパティを制御し、アニメーションを一時停止することができ
、それは二つの値があります：
ランニングを-プレイが
一時停止-一時停止

<script>
    var run = true
    var div = document.querySelector("div")
    function running(){
        if(run){
            // 如果是播放状态就暂停
            div.style.animationPlayState = "paused"
        }else{
            div.style.animationPlayState = "running"
        }
        run = !run
    }
</script>