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

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

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

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

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

遷移

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

遷移プロパティ値

説明する財産
遷移プロパティ遷移する必要がある属性はallにすることもでき、block、noneなどは使用できません。
遷移期間あるプロパティから別のプロパティに移行するのにかかる時間を指定します。デフォルト値は 0 です。0 の場合、変化は瞬間的であり、遷移効果は確認できません。
遷移タイミング関数トランジションアニメーションタイプです。利用可能なタイプには、リニア(一定速度)、イーズイン(減速)、イーズアウト(加速)、イーズインアウト(最初に加速してから減速)、キュービックベジェ(カスタマイズ可能なキュービックベジェ曲線)があります。
遷移遅延遷移動作が検出された後、一定の遅延後に実行が開始されることを指定します。

トランジション機能

遷移はイベントによってトリガーされる必要があります (ホバー疑似クラスの追加など)。遷移は、ページが読み込まれたときに 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 秒。
}

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

アニメーション

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

財産説明する
アニメーション名@keyframes で定義されたアニメーションを呼び出すために使用されます。これは、@keyframes で定義されたアニメーション名と一致します。
アニメーション期間アニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を指定します。デフォルト値は0です
アニメーションタイミング関数速度曲線は、遷移タイミング関数と同様に、利用可能なタイプは、リニア(等速)、イーズイン(減速)、イーズアウト(加速)、イーズインアウト(最初に加速してから減速)、キュービックベジェ:キュービックベジェ曲線で、カスタマイズできます。
アニメーション遅延アニメーションが開始するタイミングを指定します。デフォルト値は 0 です。
アニメーションの繰り返し回数アニメーションを再生する回数を指定します。デフォルト値は1です
アニメーションの方向Normal はデフォルト値です。normal に設定すると、アニメーションはループするたびに順方向に再生されます。alternate (交互に) に設定すると、アニメーションは偶数回目に順方向に再生され、奇数回目に逆方向に再生されます (この設定は、animation-iteration-count の値が 1 より大きい場合に有効です)
アニメーション再生状態実行中の場合、この値を使用して一時停止したアニメーションを再生できます。ここでの再生は要素アニメーションの最初からではなく、一時停止した位置から始まります。一時停止、一時停止
アニメーション フィル モードデフォルトでは、アニメーションが終了すると、要素のスタイルは開始状態に戻ります。animation-fill-mode プロパティは、アニメーション終了後の要素のスタイルを制御できます。主なプロパティ値は 4 つあります: none (デフォルト、アニメーション開始前の状態に戻る)、forwards (アニメーション終了後もアニメーションは終了状態のまま)、backwords (アニメーションは最初のフレームの状態に戻る)、both (アニメーションの方向に応じて forwards ルールと backwards ルールを交互に適用)

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

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

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

    50% {
        背景: 黄色
    }

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

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

変身

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

要約する

違い遷移アニメーション
自動的に実行できますか?いいえ、ホバーなどのイベントによってトリガーされる必要がありますできる
それは繰り返し起こることはありますか?いいえ、トリガーがない限りできる
複数の状態を含めることができますか?いいえ、開始状態と終了状態のみがありますはい、例えば0%から100%まで、任意の遷移状態を指定できます
一時停止してもいいですか?いいえ、1回限りはい、例えばホバーイベントは一時停止をトリガーします
速度曲線を定義できますか?できるできる
プロパティ値の遷移を定義できますか?できるできる

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

<<:  WeChatアプレットで数字当てゲームを実装する実際のプロセス

>>:  Linux システムでの Selenium クローラー プログラムの導入の概要

推薦する

正規表現に基づくあいまい文字列置換を実装するMySQLの方法の分析

この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...

1 つ以上のフィールドに基づいて重複データを検索する MySQL SQL ステートメント

SQLはテーブル内の重複レコードをすべて見つけます1. テーブルには id と name の 2 つ...

MySQL パフォーマンス最適化のヒント

MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...

Windows環境でのMySQL 8.0.13無料インストールバージョンの設定チュートリアル

目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...

jsを使用して中国語からピンインへの変換の完全な手順を実行します

jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...

Centos8 に nginx をインストールするための詳細なチュートリアル (画像とテキスト)

Nginx (「エンジン エックス」と発音) は、インターネット上の最大規模のサイトの負荷を処理す...

Linuxのsortコマンドの複数のパラメータを理解するための1つの質問

sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...

Dockerイメージ送信コマンドcommitの動作原理と使い方の詳細な説明

ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...

MySQL が暗黙のデフォルト値を処理する方法

何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...

MySQL マルチマスターと 1 スレーブのデータバックアップ方法のチュートリアル

概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...

MySQLデータをOracleに移行する正しい方法

mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...

インターフェース設計の10の一般的なルール

<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...

Ubuntu 20.04でLNMP環境を構築する方法

簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...