CSS3アニメーション属性の基本的な使い方animation_html/css_WEB-ITnose

CSS3 には、アニメーションという新しい属性が追加されました。アニメーションを使用して作成されたアニメーションは、Flash や JavaScript で作成されたアニメーションほど滑らかで豪華ではありませんが、コード量とブラウザのパフォーマンスの点では明らかな利点があります。

アニメーションの基本的な使用法は次のとおりです:

animation: name keeping-time animate-function delay times iteration final;

最初のパラメータ: name (animation-name):

アニメーションの名前、つまりアニメーションプロセスの名前。CSS3 は「キーフレーム」を使用します。

@-webkit-keyframes name{    0%{        opacity: 0;    }    100%{        opacity: 1;    } }

接頭辞 -webkit- は Webkit コア ブラウザ (Chrome、Safari、および変更された Opera) を示します。 上記のコードは、名前という名前のアニメーションを定義します。その効果は、透明度を 0 から変更することです。 0%~100% はプロセス全体を指します。もちろん、0%~20~50%~100% のように複数のセグメントを定義することもできます。

2 番目のパラメータ: Keeping-time (animation-duration):

アニメーション全体の継続時間は、時間単位 (s または ms) で指定する必要があります

3 番目のパラメータ: animate-function (animation-timing -function):

モーション モード (アニメーション モード) のベジェ曲線、可能な値は次のとおりです:ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1 ,num2, num3、num4)。

4 番目のパラメータ: 遅延 (アニメーション遅延):

アニメーション遅延の実行時間。単位は s または ms です。遅延時間が 0 の場合でも、時間単位は である必要があることに注意してください。追記 直接0と書いた場合、ChromeやSafari(webkit)では問題ありませんが、FF(gecko)では無効となります。

5番目のパラメータ:times (animation-iteration-count):

アニメーションループが実行される回数、単位なし、無限は無限ループです。

6 番目のパラメーター: 反復 (アニメーションの方向):

アニメーションがループする場合、ループ方法は次のとおりです: 代替 (偶数の場合は順方向に再生、奇数の場合は逆方向に再生)、通常 (毎回順方向に再生) 。

7番目のパラメータ：final（animation-fill-mode）：

アニメーションの終了時の状態（100%に達する）、値は次のとおりです：backward（初期状態に戻る）、forwards（最終状態で停止) )、なし、両方。

各パラメータを個別に記述することもできます。最後に使用する場合は、ブラウザの接頭辞を忘れずに追加してください。

.classname{    -webkit-animation:name 6s linear 0ms infinite normal forwards;    -moz-animation:name 6s linear 0ms infinite normal forwards;    -o-animation:name 6s linear 0ms infinite normal forwards;    animation:name 6s linear 0ms infinite normal forwards;}

接頭辞なしでパラメータを最後に記述する利点は、アニメーションがすべてのブラウザで認識されるまで待機できることです。プレフィックスは以前のスタイルをオーバーライドできます。