css3-animation を使用してフレームごとにアニメーションを作成する_html/css_WEB-ITnose

参考: https://www.qianduan.net/css3-animation/

css3-animation を使用してフレームごとのアニメーションを作成します

一般的な使用法:

animation:mymove  4s ease-out 1s backwards; @-webkit-keyframes mymove /*Safari and Chrome*/{from {left:0px;}to {left:200px;}}<br />

解释：mymove :keyframes的名称;4s:动画的总时间;  ease-out: 快结束的时候慢下来;1s:停顿1秒后开始动画;backwards:动画结束后回到原点默认：播放一次

主流のブラウザと互換性があります:

rrree

animation-name、バインドするキーフレームの名前を指定します。お好みで選択できますが、将来のメンテナンスの便宜のため、類似した名前を選択することをお勧めしますアクション関連の名前に。たとえば、実行中のアクションをバインドする場合は、それに run という名前を付けることができます。

time、ここには 2 つの時間があります。最初の時間は、アニメーションの完了に必要な時間を指定します。2 番目の時間は、アニメーション遅延の再生が開始される時間です。これら 2 つの値は、秒 's' またはマイクロ秒 'ms' を使用して書き込むことができます (1000ms=1s)。これを 1 つずつ導入する必要はありません。

animation-timing-function は、アニメーションのモーション カーブを指定します。 end |steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)

ease: アニメーションはゆっくり始まり、その後加速し、最後に遅くなります。

linear; : アニメーションは最初から始まり、尾の速度は同じです。

ease-out: 低速で終了します。アニメーションは低速で開始および終了します。

.test{  -webkit-animation: < 各种属性值 >;     -moz-animation: < 各种属性值 >;       -o-animation: < 各种属性值 >;          animation: < 各种属性值 >;    }

animation-iteration-count、アニメーションの再生回数、デフォルト値は 1、無限です。無制限に設定すると、アニメーションは継続的に再生されます。

animation-direction

、アニメーションが反対方向に動くかどうかを指定します。

= 通常 | 逆方向 | 代替-逆方向

最初の値は通常の回転と再生、リバースは逆回転で、アニメーションが 1 回再生された後に逆回転します。 -count: 1 の場合、この値は無効になります。 count が 1 に設定されている場合、オルタネート リバースは逆回転で開始され、通常の回転に戻ります。

animation-play-stateは、アニメーションが実行中か一時停止中かを定義します。これは、後で新しく追加された属性です。実行中と一時停止中です。デフォルト値は「normal」で、アニメーションは通常どおり再生されます。一時停止されている場合は、アニメーションも一時停止されます。アニメーションがモーションで始まる場合、一時停止が設定されている場合、アニメーションは一時停止され、再度実行が設定されている場合、アニメーションは一時停止された場所から動き始めます

animation-fill-mode

。これは外部の状態を定義します。アニメーションの再生時間は、名前が示すように、アニメーションの再生が終了した後の状態を指定します。 、順方向はアニメーションの最後で停止します。逆方向はアニメーションが最初に表示された画面に戻ります。どちらもアニメーションの終了または開始状態に適用されます。