CSS:アニメーションを再生する2つの方法(1)@キーフレームとアニメーション

2856 ワード
CSS3 CSS テキストリンク

@keyframes :


公式ドキュメントによると、@キーフレームの定義は次のとおりです.
キーフレーム規則を使用すると、開発者はキーフレームを設定することによってCSSアニメーションプロセスの中間プロセスを制御できます.これらのキーフレームはアニメーションの中間部分を通過する可能性があります.この規則は、ブラウザがアニメーションを自動的に処理するよりも、中間動作をより細かく制御することができます.
CSSを使用してブラウザをアニメートする方法は、変換である可能性があります.これに比べて、@キーを使用して[中間プロシージャ](Intermediate Passes)を追加することができるので、より詳細なアニメーション効果を設定できます.次のコードと同様に、%を中間プロセスとして使用できます.
@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

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


@keyframeステータスを使用してアニメーション効果を指定すると、そのアニメーションを適用したいエンティティのcssでアニメーションプロパティを使用して、@keyframeで指定したアニメーションの持続時間、遅延度、繰返し度、方向などを決定できます.たとえば...

  • animation-name:@keyframeで指定したアニメーション名.どのようなアニメーションを書くかを選択する部分

  • アニメーション-duration:アニメーションの持続時間.単位はs(秒、秒)またはms(ミリ秒.,1/100秒)です.

  • アニメーション遅延:アニメーション遅延.単位はs(秒、秒)またはms(ミリ秒.,1/100秒)です.

  • アニメーション-反復-カウント:アニメーションの繰り返し回数.単位、数字、無限はありません.△反復は反復、すなわち反復を意味する.

  • アニメーション-direction:アニメーションの方向.normal、reverse、alternative、alternate-reverseなどがあります.translate X(50 px)アニメーションなら逆のtranslate X(-50 px)で…そうです.

  • animation-fill-mode:アニメーションの実行前と実行後のアニメーション状態.none(デフォルト)、forward、backword、両方あります.

  • animation-play-state:アニメーションが実行されるかどうかを設定します.立ち止まって走る二人だけ.

  • アニメーション-タイミング-関数:アニメーションの継続.
    1)もう少し深く、操作原理を見て「Bezier曲線」で表現します.(Bezierカーブは、コンピュータグラフィックスで広く使用されているスムーズカーブをモデリングするためのカーブです.ウィキペディアを参照してください.)下と同じ顔をしている.

    図に示すように、P 0、P 1、P 2、P 3には4つのポイントがあります.
    (点P 0,P 1は開始部の時間または位置を示し、点P 2,P 3は終了部の時間または位置を示す.)
    しかし、実際には、これらの理論的なものよりも、cubic-bezierの使い方を本当に知っておく必要があります.cubic-bezier(x 1,y 1,x 2,y 2)
    (x 1、y 1はP 1の座標、x 2、y 2はP 2の座標であり、いずれも[0-1]の間の少数の値を有する.)
    これらのcubic-bezier値が特定の値として規定された曲線の動きを以下に示す.
  • ease (default): (0.25, 0.1, 0.25, 1.0)
  • ease-in: (0.42, 0.0, 1.0, 1.0)
  • ease-in-out: (0.42, 0.0, 0.58, 1.0)
  • ease-out: (0.0, 0.0, 0.58, 1.0)
  • linear : (0.25, 0.25, 0.75, 0.75)
  • stpes(number_of_stpes, direction)
    このように、上のBezier曲線の移動中に停止した部分のみを表示する形での移動もあります.つまり、一貫性のない断続的なアニメーションアクションを与えたい場合は、それを使用することができます.
    • 👉 もっと詳しい説明や画像が必要なら、このブログの記事でとてもよく整理されています.

  • 上のすべてのものはアニメーションに書くことができます.次のようにします.
    /* @keyframes duration | easing-function | delay |
    iteration-count | direction | fill-mode | play-state | name */
    animation: 3s ease-in 1s 2 reverse both paused slidein;
    /@keyframes name | duration | easing-function | delay/🌟
    animation: slidein 3s linear 1s;
    /@keyframes name | duration/🌟
    animation: slidein 3s;
    2番目と3番目の形で一番多く使われているようです.
    • [C言語規格]#1008 A/B
    Warning: validateDOMNesting(...): cannot appear as a descendant of . 解決する