css3アニメーションの対応プロパティの説明 anime_html/css_WEB-ITnose

アニメーションの反復回数、デフォルトは 1 です。 2 回、3 回、4 回に設定できます...infinite は無限を意味します

はアニメーション サイクルの継続時間を指します。単位は秒またはミリ秒です。

はアニメーション遅延の実行時間を指します。単位は秒 s またはミリ秒 ms です。

は、アニメーション タイムライン上でフレームが進む方向を指します。

reverse: 通常の実行方向とは反対です。 alternate: 順方向に再生した後、最初に巻き戻します。後で再生

alternate-reverse: オルタネートの実行方向の逆

animation-fill-mode

none: デフォルト値。オブジェクトのアニメーション以外の状態、DOM がアニメーション化される前の状態を設定しないでください

forwards: オブジェクトの状態をアニメーション終了時の状態、100%、またはアニメーションの方向が反転に設定されている場合は設定します1 フレーム backwards: オブジェクトの状態をアニメーション開始時の状態に設定します (テストでは、DOM がアニメーション前の状態にないことが示されています)

both: 設定します。オブジェクトの状態をアニメーションの終了時または開始時の状態に変更し、終了時の状態が優先されます

animation-play-state

running: この属性を設定しますアニメーションを継続するには

アニメーションの実行状態、一時停止または再生継続の属性は次のとおりです: 実行中 (デフォルト) および一時停止中コアブラウザには「-webkit-」という接頭辞を付ける必要があります):

簡単な例 :

div {  animation-name: diagonal-slide;  animation-duration: 5s;  animation-iteration-count: 10;}@keyframes diagonal-slide {  from {	left: 0;	top: 0;  }  to {	left: 100px;	top: 100px;  }}

参考:

ヒント: CSS3 アニメーションのプログレッシブ実装、プロンプトを待って少しずつ効果

読み込みアニメーションを実現するための CSS3 アニメーションについて話しましょう