CSS3の新機能まとめ（アニメーション）_html/css_WEB-ITnose

アニメーションは CSS3 のハイライトの 1 つです。//

キーフレーム アニメーションを完了するには、animation 属性で @keyframe を指定します。

@keyframe の使用法:

@keyframes name {  0% { top: 0; }/*0%可用from关键字替代*/  50% { top: 10px; }  100% { top: 0; }/*100%可用to关键字替代*/}

CSS3 なので、驚くべきことはありません さまざまなプレフィックス:

--画像は MDN から取得され、CSS のキー フレーム

複数の属性を 1 つのフレームに入力でき、一貫性を保つ必要はありません。たとえば、次のとおりです。

@-webkit-keyframes identifier {  from { top: 0; }  50% { top: 10px;background-color:red; }  to { top: 20px;color:red; } }/*这是一个完全有效的关键帧定义*/

注意すべき点がいくつかあります:

キーフレーム内の有効な属性はアニメーション化可能な属性です。アニメーション化できない属性が表示された場合、その属性は無視され、他の属性のアニメーションには影響しません

属性の後に ! important が続く場合、その属性は無視されます,

キー フレームが繰り返し定義された場合、後で定義されたフレームが取得されます,

@-webkit-keyframes identifier { from { top: 0; }  50% {    top: 10px; /*该属性会动画*/    background-color:red !important; /*因为有!important字样,所以该条将被忽略*/    text-align:center; /*由于该属性不为可动画属性,因此也被忽略*/}  to { top: 20px;color:red; }   100% {color:green; } /*由于to关键字表示100%,所以该动画只会执行改变颜色为green,而to所对应的属性全部被忽略*/}

フレーム番号の範囲は 0%-100% であり、この範囲に当てはまらないものは無視されます(実験後、キーフレーム定義は順序が狂って正しく実行される可能性がありますが、可読性はあまり良くありません);

アニメーションの使用法:

animation-name: アニメーションの名前。 by @keyframe;

animation-duration: アニメーションの設定にかかる時間、 // この 2 つ目は必須です。2 つ目はデフォルト値であるため説明しません。 0s。0s はアニメーション効果を生成しないため、必須です。

animation-timing-function: アニメーションの速度曲線を設定します。デフォルト値は easy で、cubic-bezier 関数を通じてカスタマイズできます。直接使用できるいくつかの定義された関数を示します。送信配列です。

animation-delay: アニメーションを開始するまでの待ち時間を設定します。デフォルトは 0 秒です。デフォルトは 1 です。アニメーションを無限にループさせるには、infinite キーワードを使用します。

animation-direction: アニメーションの実行後に逆の順序を設定します。デフォルトは通常です。逆の実行を有効にするには、alternate キーワードを使用します。 //

animation-play-state: アニメーションの現在の状態を設定します。デフォルトは実行中です。実行状態を一時停止に設定できます。

animation-fill-mode: アニメーションの実行後の状態を設定します (復元 (なし)、最初のフレームを保持 (後退)、最後のフレームを保持 (前進)、 MDN では、両方の値もあり、それは同時に後方と前方であると言っています...、)

// アニメーション反復回数の値が設定されている場合。無限にするには、この属性を無効にします。

アニメーションの略語は順序に特に厳密で、仕様は次のとおりです:

animation:name、duration、timing-function、delay、iteration-count、direction、play-state、fill-mode ;

使用時の注意点:

さまざまなプレフィックス...transform が @keyframe で使用されている場合は、次のようなプレフィックスも付ける必要があります:

@-webkit-keyframe demo {    from {-webkit-transform:rotate(7deg);}      to {-webkit-transform:rotate(14deg);}  }

いくつかの参考ドキュメント:

MDN のアニメーション

Keyframes in CSS3

W3School のアニメーション属性

W3School の @Keyframe ルール