css 3アニメーションプロパティ大全

2554 ワード

animationプロパティ
構文:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
 :animation: myanimation 2s linear 1s infinite forwards;

アニメーションアトリビュートは、アニメーションアトリビュートを設定するためのスケッチアトリビュートです.
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
アニメーション-nameアニメーション名アニメーションアニメーション-durationアニメーションは、アニメーション効果がないことを意味するtimeのデフォルト値が0である秒またはミリ秒の完了値を指定します.
animation-timing-functionアニメーションがどのように周期値を完了するかを設定します:linear均一速度easeは先に遅くなってから速くなり、終了前に遅くなりますデフォルトease-in低速開始ease-out低速終了ease-in-out低速開始cubic-bezier(n,n,n,n)cubic-bezier関数で自分の値を終了します.可能な値は0から1までの値です.
animation-delayアニメーションの起動前の遅延間隔値:timeのデフォルト値は0 です.
animation-iteration-countアニメーションの再生回数:nアニメーションの再生回数を定義する数値.1 infiniteアニメーションの再生回数を定義します.
アニメーション-directionでアニメーション値を順番に逆再生するかどうか:normal正常reverse逆再生alternateは奇数回(1、3、5...)順方向に再生し、偶数回(2、4、6...)逆再生alternate-reverseは奇数回(1、3、5...)逆再生、偶数回(2、4、6...)順方向再生アニメーション-fill-modeアニメーションが再生されない場合(アニメーションが完了した場合、またはアニメーションが遅延して再生が開始されていない場合)、どの状態値にするか:noneデフォルト、アニメーションが再生された後、画面は開始位置forwardsでアニメーションを再生し、アニメーション定義の最後のフレーム(最後の属性値を維持)backwardsでアニメーション-delayが設定されている場合、delayが始まるまでの間、画面は最初のフレームに止まります.delayが設定されていない場合、画面は要素設定の初期値both設定アニメーション状態がアニメーション終了または開始の状態(例えば奇数再生をforwards状態、偶数再生をbackwards状態)に設定.
animation-play-stateアニメーションが実行中または一時停止されているかどうか:pausedアニメーションrunningの一時停止を指定実行中のアニメーションを指定します.デフォルトはです.
initial設定プロパティは、デフォルト値です.
inherit親要素から属性を継承