ボム君.com

CSS の @keyframe, animation 属性の使い方

CSS

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

animation と @keyframe を使用するとCSSで簡単にアニメーションが実装できます。
このサイトを作成する際に animation と @keyframe を使用したのでその使い方を紹介します。

Elastic | A collection of background image created by CSS only

@keyframeとは

詳しくはこちらに書かれていますが、簡単に説明すると CSS animation の流れの中間地点を制御することができます。

developer.mozilla.org

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

Can I use... Support tables for HTML5, CSS3, etc

使いかた例

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

css のanimation属性で指定したアニメーション名と@keyframesの識別子を合致させて使用します（上の例だとspin）
10s かけて 0% から 100% まで 識別子spin がアニメーションします。

オプション一覧

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 内のパーセントの値を駆使することで複雑なアニメーションも比較的簡単に実装できます。

例

  animation: spin 10s linear infinite;

この例だと
animation-name が spin
animation-duration が 10秒
animation-timing-function が linear
animation-iteration-count が infinite
それ以外がデフォルトの値になっています

背景画像に@keyframe, animationを使用するサンプルサイトを作成したので実際に動きを確認してみてください。

www.sottar.net