CSSだけでアニメーションする背景を作る

keyframe を使ってCSSだけで背景画像を作成しました

animation と keyframe を使用するとCSSで簡単にアニメーションが実装できます。

このサイトを作成する際に animation と keyframe を使用したのでその使い方を紹介します。

Elastic | A collection of background image created by CSS only

コードはこちらに上がっています。
https://github.com/sottar/elastic

keyframeとは

詳しくはこちら (@keyframes - CSS | MDN) に書かれていますが、簡単に説明すると CSS animation の流れの中間地点を制御することができます。
10%ではこの状態、50%ではこの状態、80％では、、、のような感じです。

モダンブラウザには全て対応しており、IEも10以降には対応しています。

オプション一覧

animation属性にオプションを設定することで細かい挙動を指定でき、
以下のオプションをつけることができます。
※（）内はデフォルトの値

• animation-name (none) 必須
  アニメーション名を指定する

• animation-duration (0) 必須
  アニメーション一回分の時間の長さを指定する

• animation-timing-function (ease)
  アニメーションのタイミング・進行割合を指定する

• animation-delay (0)
  アニメーションがいつ始まるかを指定する

• animation-iteration-count (1)
  アニメーションの繰り返し回数を指定する
  infiniteを指定すると無限に再生を繰り返す

• animation-direction (normal)
  アニメーションを交互に反転再生させるかどうかを指定する

• animation-play-state (running)
  アニメーションを一時停止したり、再開したりさせる
  マウスオーバー時に動きを止めたい時に使用できます

• animation-fill-mode (none)
  アニメーションの実行前や実行後にどのようなスタイルを適用するかを設定する

これらのオプションと keyframes 内のパーセントの値を駆使することで複雑なアニメーションも比較的簡単に実装できます。

使いかた例

.css {
  animation: spin 10s linear infinite;
}
@keyframes spin {
  0% {
    width: 50px;
    transform: rotate(0deg);
  }
  50% {
    width: 100px;
    transform: rotate(120deg);
  }
  100% {
    width: 200px;
    transform: rotate(360deg);
  }
}

css の animation 属性で指定したアニメーション名と keyframes の識別子を合致させて使用します（上の例だとspin）

10s かけて 0% から 100% まで 識別子spin がアニメーションします。
初期値が 0% の width: 50px; transform: rotate(0deg);,
5s後に width: 100px; transform: rotate(120deg);,
10s後に width: 200px; transform: rotate(360deg); になり、その後0%の値に戻って繰り返されます。

背景画像に keyframe, animationを使用するサンプルサイトを作成したので実際に動きを確認してみてください。
Elastic | A collection of background image created by CSS only