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

アニメーション

値: [ || || || || ||アニメーション遅延> || <アニメーション方向>]*

アニメーションタイミング関数:アニメーションの速度曲線を定義します

ease: アニメーションは低速で開始され、その後速度が上がり、終了する前に減速します。

linear: 均一速度

ease-in: アニメーションが低速で開始します

ease-out: アニメーションが低速で終了します

ease-in-out: アニメーションが低速で開始および終了します。これは簡単よりも遅く、均一です

ステップスタート: キーフレーム設定に従ってフレームごとに表示します。最初のフレームは、キーフレームによって設定された最初のフレームです。

step-end: キーフレーム設定に従ってフレームごとに表示します。最初のフレームはスタイルの初期値です。

steps([, [ start | end ]]?): キーフレームに設定された 1 つのフレームを複数のフレームに分割します。start は最初のフレームが表示されるとき、end はスタイルが最初に表示されるときです。値、例:steps(4,start)

cubic-bezier(, , , ): cubic-bezier 関数内の独自の値。取り得る値は0から1までの数値です。ベジェ曲線は最初と最後の 2 つの制御点の位置を制限し、中央の 2 つの制御点の位置を調整することで、よく使用されるアニメーション効果を柔軟に得ることができます

animation-iteration-count

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

animation-duration

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

animatin-delay

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

animation-direction

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

normal: デフォルト値。これは、前方に移動し、最後のフレームの後に最初のフレームに戻ることを意味します。

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

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

animation-fill-mode

アニメーション終了後の状態を設定

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

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

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

animation-play-state

paused: この属性を設定してアニメーションを一時停止します

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;  }}

参考:

http ://www.w3.org /TR/2012/WD-css3-animations-20120403/

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

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