アニメーション

°animation-name

°animation-duration

°animation-timing-function

°animation-delay

°animation-iteration-count

°animation-direction

°animation-fill-mode

°animation-play-state

アニメ名

それはあなたが効果を入れた名前です

アニメーション期間

このプロパティは、アニメーションが1サイクルを完了するまでの時間の長さを指定します.

構文

アニメーション期間:6 S ;

値

* time ( s - ms )
アニメーションが始まる前に時間オフセットを定義します.

アニメーションタイミング機能

プロパティは、アニメーションが各サイクルの期間を通じて進行する方法を設定します.

構文

アニメーションタイミング機能:楽;
アニメーションタイミング機能
アニメーションのタイミング機能:容易に;
アニメーションのタイミング機能:容易に
アニメーションタイミング機能:線形;
アニメーションタイミング機能:ステップスタート;
アニメーションタイミング機能:ステップ終わり;

値

1

アニメーションは徐々に開始し、中央で加速し、最後に減速します.
2

アニメーションは徐々に開始し、最後まで徐々に加速します.
3

アニメーションはすぐに始まり、最後まで徐々に減速します.
4

アニメーションはすぐに始まり、最後まで徐々に減速します.
イージーアウト対
簡単にアウト速度の速度よりも容易に速度.
5

アニメーションは一定速度です.
6

アニメーションは、最終的な状態に即座にジャンプします.
7

アニメーションは、それが即座に最終的な状態にジャンプする最後まで、初期状態にとどまります.
8

整数を使ってsteps ()を使用すると、末尾に達する前に特定の数のステップを定義できます.要素の状態は徐々に変化することはなく、別々のインスタンスの状態から状態へとジャンプする.

アニメーション遅延

この機能は、サイクルが始まるときの動きの開始の遅れです

構文

アニメーション遅れ:3 s ;

値

時間
アニメーションが始まる前に時間オフセットを定義します.

例

アニメーション反復カウント

このプロパティは、1サイクルの繰り返し数を計算する

構文

アニメーションの反復数:無限;
アニメーション繰り返し数: 3 ;

値

無限
アニメーションは永遠に繰り返されます.
時間
アニメーションが始まる前に時間オフセットを定義します.

例

アニメーション方向

プロパティは、アニメーションが前方、後方、または前後に交互に再生するかどうかを設定します.

構文

アニメーション方向:通常;
アニメーション方向:逆;
アニメーション方向:交互;
アニメーション方向:交互に逆;

値

*ノーマル
反転
交互
交互反転

例

1ノーマル

アニメーションが転送されます.それが終わりに達するとき、それは最初のキーフレームで終わります.
2 -逆

アニメーションが後方に再生されます:最初のキーフレームで最後のキーフレームで終わる.
3 -代替

アニメーションを最初に転送し、後方に:
-最初のキーフレームで開始する
-最後のキーフレームで停止する
-もう一度起動しますが、最後のキーフレームで
-最初のキーフレームで停止する
4 -交互の逆

アニメーションは最初に後方に再生されます.
-最後のキーフレームで開始する
-最初のキーフレームで停止する
-もう一度起動しますが、最初のキーフレームで
-最後のキーフレームで停止する

アニメーションフィルモード

この機能は、セッションが終了した後に動作します

構文

アニメーション塗りつぶしモード:なし;
アニメーションフィルモード:前方;
アニメーションフィルモード:後方;
アニメーション塗りつぶしモード:両方;

値

なし
*転送先
後方へ
*両方

例

1

アニメーションスタイルは、既定のスタイルには影響しません:アニメーションが開始される前に、要素が既定の状態に設定され、アニメーションが終了した後に既定の状態に戻ります.
2 -前方へ

アニメーションの最後に適用された最後のスタイルはその後保持されます.
3 -後方

アニメーションが実際に始まる前に、アニメーションのスタイルはすでに適用されます.
4 -両方

スタイルは、アニメーションの前と後に適用されます.

アニメーション再生状態

プロパティは、アニメーションが実行されているか一時停止するかどうかを設定します.

構文

アニメーション再生状態:実行中
アニメーション再生状態:一時停止;

値

*ランニング
一時停止

例:

飛翔鳥降雪ソース
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://www.quackit.com/css/css3/properties/css_animation.cfm
https://cssreference.io/animations/