戦闘にWebフロントエンドを取得：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でイベントを追加することができ、プロパティ割り当て機能モニターの形式をサポートしていません。

学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
<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>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

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

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

学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
<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>