CSS キーフレームによるアニメーション

CSS キーフレームによるアニメーションのコードを紹介します。

書式

以下の書式を利用します。

animation: (キーフレーム名) (アニメーション時間) (イージング) ();

animation: (キーフレーム名) (アニメーション時間) (イージングの種類) (アニメーション開始時間) (アニメーション回数) (アニメーションの方向)

キーフレームの書式

以下の書式が利用できます。

@keyframes (キーフレーム名) {
  from {
    /* 最初のフレームのスタイルを記述 */
  }
  to {
    /* 最後のフレームのスタイルを記述 */
  }
}

@keyframes (キーフレーム名) {
  0% {
    /* 最初のフレームのスタイルを記述 */
  }
  
  n% {
    /* n%のフレームのスタイルを記述 */
  }

  100% {
    /* 最後のフレームのスタイルを記述 */
  }
}

アニメーション時間、アニメーション開始時間の書式

アニメーションの時間は s ms で指定します。小数も利用できます。

イージングの種類

イージングには以下の種類があります。

イージングの種類と動作の詳細はこちらの記事を参照して下さい。

アニメーション回数

アニメーションの回数は数値または、unlimitを指定できます。

アニメーションの方向

アニメーションの方向は以下を設定できます。

実装例

フェードイン アニメーション

非表示の要素をアニメーション表示する - 要素をフェードイン表示するを参照して下さい。

フェードアウト アニメーション

要素をフェードアウトするを参照して下さい。

移動

translate コマンドを利用した要素の移動アニメーションを参照してください。

回転

rotate コマンドを利用した要素の回転アニメーションを参照してください。

補足

キーフレームの指定は animation-name プロパティで設定できます。
アニメーションの時間は animation-duration プロパティで設定できます。
イージングの種類は animation-timing-function プロパティで設定できます。
アニメーションの開始時間は animation-delay プロパティで設定できます。
アニメーションの再生回数は animation-iteration-count プロパティで設定できます。
アニメーションの方向はanimation-direction プロパティで設定できます。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。