CSS トランジションとアニメーションについて説明する — トランジション/アニメーション (非常に包括的)

プログラミング 2023-12-16 23:08:53 訪問数: null

序文

ユーザーがWeb アプリケーションのエクスペリエンスにますます注目するようになり、次に続くのは Web です。アプリケーションは、ユーザーが使用するプロセス全体を通じてスムーズな状態を実現するために、より完全なウェブ アニメーション効果を提供する必要があります。今ではこれが当たり前になり、ユーザーは無意識のうちに、より迅速なフィードバック応答と、よりフレンドリーなユーザー インターフェイスを望んでいます。

ウェブアニメーションとは

  • 屏幕刷新率デバイスのディスプレイが新しい画像を描画する 1 秒あたりの回数 (ヘルツ (Hz) 単位)。現在のほとんどのデバイスは 60Hz です。
  • 卡顿 のフレームあたりの割り当て時間は、16毫秒 (1秒/ 60 = 16.6毫秒) よりもわずかに多いだけです。ブラウザがこのフレーム内で作業を完了できない場合、フレーム レートが低下し、フレームのスキップや画面上のコンテンツの揺れが発生する可能性があります。この現象はしばしばスタッタリングと呼ばれます。
  • 跳帧ブラウザのアニメーションがそれぞれ 16 ミリ秒、32 ミリ秒、48 ミリ秒でフレームをカットする場合。 32ms 以降、ブラウザは他のタスクを完了しておらず、アニメーション フレームのカットも実行していません。アニメーション フレームのカットが再開されると、ブラウザは 48 ミリ秒のアニメーション フレーム カットに到達します。ブラウザが 16 ミリ秒の画像から 48 ミリ秒の画像に直接ジャンプすると、フレーム スキップが発生します。

上記の概念を理解したら、もう一度見てみましょうWeb アニメーションの本質は、要素の外観スタイルや配置位置がブラウザのフレームによって滑らかな状態で描画されることです。フレームごと。変更を完了します。

JS/CSSアニメーションの簡単な紹介

現在、ブラウザでアニメーションを実装するには 2 つの方法があります。この記事では主に 2 番目の方法について説明します。CSS 动画

  • JS 动画

    • setTimeout / setInterval / requestAnimationFrame
      最も一般的に使用される API は setTimeout と setInterval です。ただし、これら 2 つの API で設定される時間はブラウザの現在のワークロードに応じて変動するため、ブラウザの描画フレームと同期することはできません。そのため、 をブラウザの描画フレームと同期させ、 を置き換えるネイティブ API requestAnimationFrame が存在します。 11> と はアニメーションを実装します。 setTimeoutsetInterval
    • アニメーション API
      ブラウザ アニメーション エンジン API。JavaScript を通じて操作されます。これらの API は CSS Transition および CSS Animation インターフェイスとして設計されているため、CSS アニメーションは JS を通じて簡単に実装でき、これはアニメーションをサポートする最も効果的な方法です。

  • CSS 动画（この記事のテーマ）

    • CSS トランジション
      CSS トランジション。トゥイーン アニメーション に属します。つまり、初期状態を設定します。次に、サイズ、色、透明度などの別のキー フレームでこの状態を変更すると、ブラウザは 2 つのキー フレーム間のフレームの値に基づいてアニメーションを自動的に作成します。
    • CSS アニメーション
      CSS アニメーションは、CSS Transition の拡張バージョンとして理解でき、 トゥイーンも実現できます。アニメーションのアニメーション効果は、フレーム単位のアニメーションの形式で描画することもできます。

CSS トランジションを学ぶ - トランジション

前述したように、これはトゥイーン アニメーションに属しており、ブラウザが実行できる前に開始と終了の 2 つのキー フレームを提供する必要があります。スタイルの違いの比較を完了し、対応するトランジション アニメーションを計算します。したがって、これには 2 つの特徴があります。

  1. 最初にレンダリングされる要素のスタイルにはキーフレームが 1 つしかないため、ブラウザはスタイルの違いを比較できません。したがって、transition通常、最初の画面でレンダリングするときには効果がありません。あ>
  2. ブラウザはスタイルの異なる 2 つのフレームに基づいて自動的に計算して遷移するため、transition は中間値を識別できる属性 (サイズ、色、位置、透明度など) のみをサポートします。 、など)、display 属性はサポートされていません。

文法の定義

CSS トランジションは、通常、短縮プロパティ transition を使用して定義されます。これが最適な方法です。これにより、異なる長さの属性値リストが回避されるだけでなく、CSS コードのデバッグ時間も節約されます。もちろん、次のサブプロパティを使用してトランジションのさまざまな部分を定義することもできます。

  • transition-property: トランジションに使用する CSS プロパティを指定します。トランジション中にアニメーション化されるのは指定されたプロパティのみで、他のプロパティは通常どおり瞬時に変更されます。

  • transition-duration: トランジションの長さを指定します。すべてのプロパティに 1 つの値を指定することも、複数の値を指定することも、プロパティごとに異なる期間を指定することもできます。

  • transition-timing-function: イージング関数 を指定して、属性値の変化方法を定義します。一般的なイージング関数は 3 次ベジェ曲線 ( cubic-bezier(<x1>, <y1>, <x2>, <y2>) ) です。もちろん、 キーワードを選択することもできます

    • 線形：cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • 緩和：cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • イーズイン：cubic-bezier(0.42, 0.0, 1.0, 1.0)
    • イーズアウト：cubic-bezier(0.0, 0.0, 0.58, 1.0)
    • イージーインアウト：cubic-bezier(0.42, 0.0, 0.58, 1.0)

    ここに画像の説明を挿入します

  • transition-delay: 遅延を指定します。これは、プロパティが変化し始めてから遷移が発生し始めるまでの時間です。

  /* 单条 简写形式 */
  transition: 
    <property> <duration> <timing-function> <delay>;
  
  
  /* 多条 简写形式 */
  transition: 
    <property> <duration> <timing-function> <delay>,
    <property> <duration> <timing-function> <delay>,
    ...;


  /* 单条 子属性形式 */
  transition-property: <property-name>;
  transition-duration: <duration-time>;
  transition-timing-function: <timing-function>;
  transition-delay: <duration-time>;
  
  
  /* 多条 子属性形式 */
  transition-property: <property-name> [, <property-name>, ...];
  transition-duration: <duration-time> [, <duration-time>, ...];
  transition-timing-function: [, <cubic-bezier>, ...];
  transition-delay: [, <duration-time>, ...];

文法の例

  • 短い形式の書籍宣言の移行スタイル
  div {
    opacity: 1;
  }
  
  div:hover {
    opacity: 0.5;
    transition: opacity, 3s;
  }
  • いずれかの属性値リストが他の属性値リストより短い場合、その値は照合に再利用されます。
  div:hover {
    transition-property: opacity, left, top, height;
    transition-duration: 3s, 5s;
  }
  
  /* 等同于下面样式声明 */
  
  div:hover {
    transition-property: opacity, left, top, height;
    transition-duration: 3s, 5s, 3s, 5s;
  }
  • 属性の値リストが transition-property の属性より長い場合、切り捨てられます
  div:hover { 
    transition-property: opacity, left;
    transition-duration: 3s, 5s, 2s, 1s; 
  }
  
  /* 等同于下面样式声明 */
  
  div:hover {
    transition-property: opacity, left;
    transition-duration: 3s, 5s; 
  }

JS関連のイベント監視

CSS トランジションの開始と終了をリッスンできます

  • transitionrun: CSS トランジション アニメーションがトリガーされました (遅延前)
  • transitionstart: CSS トランジション アニメーションがトリガーされました (遅延後)
  • transitionend：CSSトランジションアニメーション終了

イベント リスニング コールバック関数は TransitionEvent オブジェクトを受け取ります。一般的な Event オブジェクトに加えて、次の 2 つの追加プロパティもあります:

  1. propertyName遷移が完了する CSS プロパティの名前を表す文字列。
  2. elapsedTimeイベントの発生時にトランジションが実行されていた秒数を示す浮動小数点数。

CSS アニメーションを学ぶ - アニメーション

CSS アニメーションは、本当の意味での CSS3 アニメーションです。キーフレームとループ時間をカスタマイズする機能があります。 CSS Transition と比較して、CSS Transition にはない次の機能があります。

  1. CSS アニメーション CSS トランジショントゥイーン アニメーションなどの効果を実装する場合、開始フレームと終了フレームの中間をカスタマイズすることもできます。アニメーションの移行をよりスムーズにするだけでなく、アニメーションの制御とカスタマイズ機能も向上します。
  2. CSS アニメーションはanimation-timing-function: steps() 属性を使用して、CSS トランジションのフレームごとのアニメーション効果を実現します。持つことはできません >
  3. CSS アニメーション 終了フレームが定義されている限り (つまり、@keyframes の to)、最初の画面がレンダリングされるとき、デフォルトでアニメーション内の指定された要素 開始時点のスタイルが開始キー フレームとして使用され、to で定義された終了キー フレームおよび指定された要素のその他のパラメーターと結合されて、計算とアニメーションが完了します。トゥイーンアニメーションのフレーム描画。 animation

文法の定義

CSS アニメーション シーケンスを作成するには、animation プロパティまたはそのサブプロパティanimation-*を使用する必要があります。このプロパティを使用すると、アニメーションを設定できます。時間、継続時間、その他のアニメーションの詳細を設定できますが、このプロパティは、 @keyframes ルールによって実装されるアニメーションの実際のパフォーマンスを構成することはできません。

-@keyframe

キーフレームを使用するには、まず名前付き @keyframes ルールを作成します。これにより、後で animation-name 属性を使用してアニメーションをキーフレーム宣言に一致させることができます。各ルールにはスタイル ブロック ステートメントである複数のキーフレームが含まれています。各キーフレームには名前としてパーセンテージ値が含まれており、アニメーション中にこのフレームに含まれるスタイルがトリガーされる段階を表します。 

css
复制代码
  @keyframes slidein {
    from {
      transform: translateX(0%);
    }

    to {
      transform: translateX(100%);
    }
  }

  /* 等效于下面 @keyframes 规则的定义 */

  @keyframes slidein {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(100%);
    }
  }

予防：

  1. 複数のキーフレームが同じ名前を使用する場合、最後に定義されたものが優先されます(カスケード スタイルがない場合)
  2. 同じキーフレーム内の同じ属性が繰り返し定義された場合は、最後に定義された属性が優先されます。
-animation-*

CSS 动画通常使用 animation 属性来定义，它是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 等一系列属性的简写形式。

  • animation-name: 要素に適用するアニメーションを説明する 1 つ以上の @keyframe の名前を指定します。複数の @keyframe は、名前のカンマ区切りリストとして指定されます。

  • animation-duration: アニメーション サイクルが完了するまでに必要な時間を設定します。1s、500ms などの単位を指定する必要があります。

  • animation-delay: アニメーションを実行するまでの待ち時間を指定します。アニメーションは後で開始することも、最初からすぐに開始することも、アニメーションの途中ですぐに再生することもできます (-1s など) 。ここで、 -1s は、アニメーションが 1 秒ですぐに開始されることを意味します。

  • animation-iteration-count: アニメーション シーケンスを停止するまでに再生する回数を設定します。有効な値 0、正の整数、正の小数、無限ループ infinite 。

  • animation-direction: アニメーションを順方向再生normal、逆方向再生reverse、順方向交互再生alternate、逆方向に設定します。再生 交互に再生しますalternate-reverse。

  • animation-play-state: アニメーションが実行中か一時停止中かを設定します。有効な値は running、paused です。

  • animation-fill-mode: CSS アニメーションが実行前後にターゲットにスタイルを適用する方法を設定します。有効な値は次のとおりです:

    • none: アニメーションが実行されていない場合、アニメーションはターゲットにスタイルを適用しませんが、要素にすでに割り当てられている CSS ルールが表示されます。それはデフォルト値です

    • both: アニメーションは forwards と backwards のルールに従い、アニメーション プロパティを両方向に拡張します

    • forwards: ターゲットは、実行中に発生した最後のキーフレームから計算された値を保持します。最後のキーフレームは animation-direction と animation-iteration-count に依存します:

      アニメーションの方向 アニメーションの反復回数 最後のキーフレーム
      normal 偶数か奇数か 100%
      reverse 偶数か奇数か 0%
      alternate 平 0%
      alternate 奇数 100%
      alternate-reverse 平 100%
      alternate-reverse 奇数 0%

    • backwards: アニメーションは、最初のキーフレームで定義された値をターゲットに適用するとすぐに適用し、delay の間この値を保持します。最初のキーフレームは animation-direction 値によって異なります:

      アニメーションの方向 最初のキーフレーム
      normalまたはalternate 0%
      reverseまたはalternate-reverse 100%

  • animation-timing-function: 主に次の 2 つの機能を使用して、各サイクルの継続時間内でアニメーションがどのように進行するかを設定します。

    • cubic-bezier 3 次ベジェ曲線 ( cubic-bezier(<x1>, <y1>, <x2>, <y2>) ) を使用してトゥイーン アニメーション 効果を実現します。

      1. 線形：cubic-bezier(0.0, 0.0, 1.0, 1.0)
      2. 緩和：cubic-bezier(0.25, 0.1, 0.25, 1.0)
      3. イーズイン：cubic-bezier(0.42, 0.0, 1.0, 1.0)
      4. イーズアウト：cubic-bezier(0.0, 0.0, 0.58, 1.0)
      5. イージーインアウト：cubic-bezier(0.42, 0.0, 0.58, 1.0)

    • steps は、フレーム単位のアニメーションを実現する区分的ステップ関数です。 n は 1 つのアニメーションのフレーム数に相当し、アニメーションの各フレームの時間は等しい (steps(n, <jumpterm>))。ここで jumpterm は次のことを意味します。 /span>

      1. ジャンプスタート: 開始位置でジャンプします。n=2 ⇒ 50% 100%; (100 / 2)
      2. Jump-end: 終了位置でステップ、n=4 ⇒ 0% 25% 50% 75%; (100 / 4)
      3. Jump-none: 開始位置と終了位置にジャンプはありません。n=5 ⇒ 0% 25% 50% 75% 100%; (100 / 4)
      4. Jump-both: 開始位置と終了位置の両方にジャンプがあります。n=3 ⇒ 25% 50% 75%; (100 / 4)
      5. start: ジャンプスタートと同等
      6. end: ジャンプエンドと同等
      7. step-start: ステップ(1、ジャンプスタート)と同等
      8. step-end:steps(1,jump-end) と同等

      steps関数アニメーション図は次のとおりです (入力は時間の進行、出力はアニメーションの進行)

      ここに画像の説明を挿入します

      ここに画像の説明を挿入します

  /* animation 声明样式顺序 */ 
  /* animation-duration */
  /* animation-easing-function */
  /* animation-delay */ 
  /* animation-iteration-count */
  /* animation-direction */
  /* animation-fill-mode */
  /* animation-play-state */
  /* animation-name */
  animation: 3s ease-in 1s 2 reverse both paused slidein; 

  
  /* animation - duration | easing-function | delay | name */
  animation: 3s linear 1s slidein;
  
  
  /* more animations - duration | easing-function | delay | name */
  animation: 3s linear slidein, 3s ease-out 5s slideout;

 
  /* animation-name */
  animation-name: none;
  animation-name: animate1;
  animation-name: animate1, animate2;
  
  
  /* animation-timing-function */
  animation-timing-function: ease;
  animation-timing-function: step-start;
  animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
  animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
  
  
  /* ...... */

文法の例

  • 短い形式の書籍宣言アニメーション スタイル
  p {
    animation: 3s infinite alternate slidein;
  }
  
  @keyframes slidein {
    0% {
      margin-left: 100%;
      width: 300%;
    }
    100% {
      margin-left: 0%;
      width: 100%;
    }
  }
  • 非短縮形式のブック宣言アニメーション スタイル
  p {
    animation-duration: 3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  
  @keyframes slidein {
    0% {
      margin-left: 100%;
      width: 300%;
    }
    100% {
      margin-left: 0%;
      width: 100%;
    }
  }

実験的な新しい特性

  • animation-range: アニメーション化された添付ファイルの範囲の開始と終了をタイムラインに沿って設定します。
  • animation-timeline: CSS アニメーションの進行状況を制御するために使用するタイムラインを指定します。
  • animation-composition: 複数のアニメーションが同じプロパティに同時に影響を与える場合に使用される複合操作を指定します。

JS関連のイベント監視

CSSアニメーションの開始と終了を監視できます

  • animationstart
    イベントは、CSS アニメーションが開始されるときに発生します。 animation-delay 遅延がある場合、イベントは遅延が経過した直後にトリガーされます。負の遅延期間を指定すると、 イベントの elapsedTime 属性値は、イベントがトリガーされたときの期間の絶対値と等しくなります
  • animationiteration
    CSS アニメーションの 1 つの反復が終了し、別の反復が始まると、アニメーション反復イベントが発生します。このイベントはanimationendイベントと同時に発生しません。
  • animationend
    アニメーション終了イベントは、CSS アニメーションが完了すると発生します。要素が DOM から削除されたとき、またはアニメーションが要素から削除されたときなど、アニメーションが完了する前に中止された場合、このイベントは発生しません。
  • animationcancel
    このイベントは、CSS アニメーション プロパティが予期せず中断されたときに送出されます (つまり、アニメーションの実行が停止しても、animationend イベントは発行されません)。

イベント リスニング コールバック関数は AnimationEvent オブジェクトを受け取ります。一般的な Event オブジェクトに加えて、追加のプロパティもあります:

  1. animationNameトランジションを完了した CSS アニメーションの名前を表す文字列。
  2. pseudoElement文字列。アニメーションが擬似要素に適用される場合、このプロパティは擬似要素の名前になります。
  3. elapsedTimeイベントの発生時にトランジションが実行されていた秒数を示す浮動小数点数。

プロジェクトの完全な添付ファイル:ここをクリックしてダウンロード

おすすめ

転載: blog.csdn.net/CRMEB/article/details/133862594
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com