アニメーションとトランジションの違い

CSS3アニメーションとJSアニメーションの違い

JSはフレームアニメーションを実装します
CSS3はトゥイーンアニメーションを実装する

• フレームアニメーション: タイマーを使用して、現在の要素を一定の間隔で変更します。
• トゥイーンアニメーション: トランジション(状態が変化する限りトランジションを追加してアニメーションを生成する)アニメーション(アニメーションを制御する複数のノード)のパフォーマンスが向上します

遷移

トランジションは、アニメーションの簡易版とも言えるシンプルなアニメーション属性です。通常はイベントトリガーで使用され、シンプルで使いやすいです。

遷移プロパティ値

トランジション機能

遷移はイベントによってトリガーされる必要があります (ホバー疑似クラスの追加など)。遷移は、ページが読み込まれたときに 1 回だけ自動的に発生することはなく、繰り返しトリガーされない限り繰り返し発生することもありません。状態は開始と終了の 2 つだけです。遷移ルール​​は 1 つの属性のみを定義できます。

<本文>
    <div> </div>
</本文>
<スタイル>
    。箱 {
        高さ: 100px;
        幅: 100ピクセル;
        背景色: ライトピンク;
        遷移: 幅 1 秒、イーズイン アウト 0.5 秒。
    }

    .box:ホバー{
        幅: 200ピクセル;
    }
</スタイル>

効果は以下のとおりです

hover時の遷移を次のように記述することもできますtransition: width 1s 0.5s ease-in-out

.box:ホバー{
    幅: 200ピクセル;
    遷移: 幅 1 秒、イーズイン アウト 0.5 秒。
}

実際、ホバー時に書き込むことも可能ですが、要素から移動すると、遷移なしで要素の幅がすぐに復元されます。
理由は非常に簡単です。ホバー時にのみ遷移を記述するため、疑似クラスはマウスがその上に移動したときにのみ有効になります。

アニメーション

アニメーションプロパティ値

<本文>
    <div> </div>
</本文>
<スタイル>
。箱 {
    高さ: 200px;
    幅: 200ピクセル;
    アニメーション: 3 秒タイプ順方向交互に無限;
    アニメーション再生状態: 実行中;
}

.box:hover {
    アニメーション再生状態: 一時停止;
}

@キーフレームタイプ{
    から {
        背景: 黄緑
    }

    50% {
        背景: 黄色
    }

    に {
        背景: アクアマリン
    }
}
</スタイル>

マウスが内側に移動する時に一時停止し、マウスが外側に移動する時に色の変更を続けます

変身

まず、transform属性は静的属性であることに注意してください。スタイルに書き込まれると、直接表示され、アニメーションプロセスには表示されません。transform属性を使用すると、要素を移動（translate）、拡大縮小（scale）、回転（rotate）、反転（skew）できます。詳細なパラメータについては、CSS3 transform属性を参照してください。

要約する

以上がアニメーションとトランジションの違いについての詳しい内容です。アニメーションとトランジションについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください！