CSS 3のアニメーション機能「Animations」

エ・ビスコム・テック・ラボ
2009-10-10 17:21:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

 CSS 3のアニメーション機能には「Transitions」と「Animations」の2種類がある。前回は「Transitions」を紹介したが、今回は「Animations」の機能を紹介したい。

 AnimationsはW3Cの草案(Working Draft)「CSS Animations Module」として提案されており、現在のところSafari 4とGoogle Chrome 2以上が対応している。また、Firefoxはバージョン3.5では未対応となっているが、将来的なバージョンでのサポートを予定している。

キーフレームで背景色を細かく変化させる

 AnimationsではTransitionsと同じように、CSSのプロパティ値を変化させることでアニメーションを作成する。このとき、Transitionsでは始点と終点の値しか指定することができなかったが、Animationsではキーフレームを利用して始点と終点以外にも値を指定し、細かな動きを設定できるようになっている。

 たとえば、次のサンプルでは<div>で構成したボックスにカーソルを重ねると、キーフレームの設定により背景色が赤色(red)→紺色(darkblue)→黄色(yellow)→赤色(red) と変化する。

サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します) サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します)
サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します) サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します)
サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します) サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します)
サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します) サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します)
サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します) サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します)
サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します) サンプル1:カーソルを重ねると背景色が滑らかに変化する(画像をクリックすると拡大します)
@-webkit-keyframes mycolor {

0%{
        background-color: red;
}

40%{
background-color: darkblue;
}

70%{
background-color: yellow;
}

100%{
background-color: red;
}

}

div:hover{
       -webkit-animation-name: mycolor;
       -webkit-animation-duration: 5s;
       -webkit-animation-timing-function: linear;
}
こんにちは
ブラウザで表示を確認する

 アニメーションの設定を行うにはまず、@-webkit-keyframesでキーフレームを作成する。@-webkit-keyframesの記述形式は次のようになっており、サンプル1ではキーフレーム名を「mycolor」と指定している。

@-webkit-keyframes キーフレーム名 {〜}

 @-webkit-keyframesの中にはキーフレームの各ポイントの設定を記述する。始点の設定は0% {〜}に、終点の設定は100% {〜}に記述し、必要に応じて1〜99%のポイントを追加する。サンプルでは40%と70%の2つのポイントを追加している。

 各ポイントには値を変化させたいプロパティの設定を記述する。サンプルでは背景色の値を変化させたいのでbackground-colorプロパティの設定を記述している。これでキーフレームの設定は完了だ。

 次に、キーフレームの設定の適用先を指定する。サンプルでは<div>にカーソルを重ねたときにアニメーションを実行したいので、div:hover {〜}に-webkit-animation-nameプロパティを追加して、適用するキーフレーム名を「mycolor」と指定する。

 あとはアニメーションに関する細かな設定を行う。-webkit-animation-durationではプロパティの値を変化させる時間を、-webkit-animation-timing-functionではキーフレーム間の補間方法を指定する。サンプルではそれぞれ「5s」「linear」と指定して、5秒の間に一定のスピードで背景色が変化するように指定している。

複数のプロパティを同時に変化させるアニメーション

  • 新着記事
  • 特集
  • ブログ