ホームページ > 記事 > ウェブフロントエンド > マスターすべきCSS3アニメーション(Animation)の8つのプロパティ
はルール @keyframes とともに使用する必要があります。例: @keyframes animes anime-name:animations;
アニメーションの継続時間を取得または設定します。 -duration: 3s; アニメーションの完了にかかる時間は 3 秒です
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(
anime-delivery:0.5s; アニメーションが開始されるまでの遅延時間は0.5秒です
anime-iteration-count: 無限 | 数値;
無限: 無限ループ
数値: ループ数
Normal: 通常の方向
reverse: 逆方向に実行します
Alternate: アニメーションは最初に通常どおり実行され、次に逆方向に実行され、交互に実行され続けます
alter-reverse : アニメーションは最初に逆方向に実行され、次に順方向に実行され、継続します。
anime-play-state: 一時停止中 | ;
実行中: モーション
一時停止中: 一時停止中
アニメーション再生状態: 一時停止中 マウスが通過するとアニメーションが停止し、マウスが離れるとアニメーションが継続します
none: デフォルト値、アニメーション時間外のオブジェクトを設定しません 状態
前方: オブジェクトの状態をアニメーション
の終了時の状態に設定します。オブジェクトの状態をアニメーションの開始時の状態に設定します
両方: オブジェクトの状態をアニメーションの開始時または終了時の状態に設定します
[関連推奨事項]
1. animation-direction 属性を導入しますCSS3 の詳細
2. CSS3 アニメーション (アニメーション) 終了イベントを監視する例を共有します
3. アニメーション属性を使用してループ間の遅延実行を実装するチュートリアル
4 。 CSS3の2つの一時停止メソッド(トランジション、アニメーション)
以上がマスターすべきCSS3アニメーション(Animation)の8つのプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。