マスターすべきCSS3アニメーション（Animation）の8つのプロパティ

アニメーション複合プロパティ。オブジェクトに適用されるアニメーション効果を取得または設定します。

「,」で区切って複数の属性値がある場合、疑似オブジェクトを含むすべての要素に適用されます:afterと:before

1.animation-nameを取得または設定しますオブジェクト 適用されたアニメーション名

はルール @keyframes とともに使用する必要があります。例: @keyframes animes anime-name:animations;

2. オブジェクト アニメーション

アニメーションの継続時間を取得または設定します。 -duration: 3s; アニメーションの完了にかかる時間は 3 秒です

3. anime-timing-function オブジェクトアニメーションの遷移タイプを取得または設定します

Linear: 線形遷移。ベジェ曲線 (0.0、0.0、1.0、1.0) と同等

イーズ: スムーズな遷移。ベジェ曲線 (0.25、0.1、0.25、1.0) と同等

イーズイン: 低速から高速まで。ベジェ曲線 (0.42、0、1.0、1.0) と同等

イーズアウト: 高速から低速まで。ベジェ曲線 (0、0、0.58、1.0) と同等

イーズインアウト: 低速から高速、そして低速へ。ベジェ曲線(0.42, 0, 0.58, 1.0)に相当

step-start:steps(1, start)に相当

step-end:steps(1, end)に相当

steps(< integer) >[, [ start | end ] ]?): 2 つのパラメーターを受け取るステップ関数。最初のパラメータは、関数のステップ数を指定する正の整数である必要があります。 2 番目のパラメーターの値は start または end で、各ステップの値が変化する時点を指定します。 2 番目のパラメータはオプションであり、デフォルト値は end です。

cubic-bezier(, , , ): 特定のベジェ曲線タイプ。4 つの値は間隔 [0, 1] 内にある必要があります。

4.animation-delay オブジェクトのアニメーション遅延時間を取得または設定します

anime-delivery:0.5s; アニメーションが開始されるまでの遅延時間は0.5秒です

5.animation-iteration-countを取得または設定しますオブジェクトアニメーション ループ回数

anime-iteration-count: 無限 | 数値;

無限: 無限ループ

数値: ループ数

6.animation-directionオブジェクトのアニメーションはループ内で反転されます。 動き

Normal: 通常の方向

reverse: 逆方向に実行します

Alternate: アニメーションは最初に通常どおり実行され、次に逆方向に実行され、交互に実行され続けます

alter-reverse : アニメーションは最初に逆方向に実行され、次に順方向に実行され、継続します。

7. anime-play-state オブジェクトのアニメーションの状態を取得または設定します

anime-play-state: 一時停止中 | ;

実行中: モーション

一時停止中: 一時停止中

アニメーション再生状態: 一時停止中 マウスが通過するとアニメーションが停止し、マウスが離れるとアニメーションが継続します

8.animation-fill-modeオブジェクトのアニメーション時間外の状態を取得または設定します

none: デフォルト値、アニメーション時間外のオブジェクトを設定しません 状態

前方: オブジェクトの状態をアニメーション

の終了時の状態に設定します。オブジェクトの状態をアニメーションの開始時の状態に設定します

両方: オブジェクトの状態をアニメーションの開始時または終了時の状態に設定します

[関連推奨事項]

1. animation-direction 属性を導入しますCSS3 の詳細

2. CSS3 アニメーション (アニメーション) 終了イベントを監視する例を共有します

3. アニメーション属性を使用してループ間の遅延実行を実装するチュートリアル

4 。 CSS3の2つの一時停止メソッド(トランジション、アニメーション)

以上がマスターすべきCSS3アニメーション（Animation）の8つのプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。