CSSアニメーション

css3アニメーション

@keyframes

アニメーションを指定します。アニメーションの名前、アニメーション期間の割合、および 1 つ以上の CSS スタイル属性を定義する必要があります

変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します

構文: @keyframes アニメーション名 {keyframes-selector {css-styles;}}

アニメーション

は、6 つのアニメーション プロパティを設定するために使用される短縮プロパティです。

アニメ名

@keyframes アニメーションの名前を指定します

アニメーション期間

アニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です

アニメーションタイミング関数

アニメーションの速度カーブを指定します。速度カーブは、変化をより滑らかにするために使用されます

リニアアニメーションは最初から最後まで同じ速度です

デフォルトを緩和します。アニメーションは遅い速度で始まり、その後速度が上がり、終了する前に遅くなります

イーズインアニメーションは低速で始まります

イーズアウトアニメーションは低速で終了します

イーズインアウトアニメーションは低速で開始および終了します

cubic-bezier(n,n,n,n) cubic-bezier 関数内の独自の値。可能な値は0から1までの数値です

アニメーション遅延

アニメーションの開始時期を指定します。デフォルトは 0 です

アニメーション反復回数

アニメーションの再生回数を指定します。デフォルトは 1 です

infinite は、アニメーションを無制限に再生することを規定します

アニメーションディレクション

次のサイクルでアニメーションを逆再生するかどうかを指定します

通常のデフォルト値。アニメーションは正常に再生されるはずです

代替アニメーションは順番に逆再生する必要があります

アニメーションの再生状態

アニメーションが実行中か一時停止中かを指定します。デフォルトは「実行中」です

paused は、アニメーションが一時停止されていることを指定します

running 指定されたアニメーションが再生中です

アニメーションフィルモード

アニメーション効果がアニメーションの再生前または再生後に表示されるかどうかを指定します

none はデフォルトの動作を変更しません

forwards アニメーションが完了したら、最後のプロパティ値 (最後のキーフレームで定義されたもの) を保持します

backwards は、アニメーションがアニメーション遅延で指定された期間表示される前に、開始属性値 (最初のキーフレームで定義された) を適用します

前方フィルモードと後方フィルモードの両方が適用されます