CSS3のキーフレームに基づくアニメーション

自動的にアニメーションを開始する

アニメーションを開始するタイミングはマウス操作などに依存しないため、自動的にアニメーションを行うこともできます。

ここまでは「div.sample1:hover」のように、マウスホバー時にアニメーションを開始するよう設定していましたが、以下のように「div.sample1」のスタイルとして設定すれば、アニメーションは自動的に開始します。

ページロード時にアニメーション開始（animation-autostart.html）

div.sample1{                                    ←:hoverを削除
  -webkit-animation-name: myanime;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;  ←無限に繰り返す
  -webkit-animation-direction: alternate;       ←反転再生させる
}
・・・
<div class="sample1">自動的にアニメーション</div>

繰り返し回数をinfiniteとしていますので、ページを開けば自動的にアニメーションが始まり、無限に繰り返されます。

図7：アニメーションが自動的に始まる（クリックで拡大）

以下のようにアニメーションの対象をbody要素にすれば、ページロード時にページ全体をフェードイン表示させることもできます。

ページ全体をフェードイン（animation-autostart.html）

@-webkit-keyframes myanime {
  from{
    opacity: 0.0;  ←始点では透明
  }
 
  to{
    opacity: 1.0;  ←終点では不透明
  }
}

body{              ←body要素のスタイルとしてアニメーションを設定＝ページ全体をアニメーション
  -webkit-animation-name: myanime;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
}

実行結果は以下のようになります。

図8：ページロード時から徐々にフェードイン（クリックで拡大）	図9：フェードイン完了（クリックで拡大）

まとめ

CSS3のTransitions、Animationsモジュールを使うことで、JavaScriptやFlashなどの助けを借りることなく、CSS単体でのアニメーションを実現できます。Transformsモジュールによる変形機能など、より豊かになったCSSの表現力と、Animationsモジュールによるキーフレームに基づくアニメーション機能を使えば、ユーザーの目を惹く特殊効果を生み出すことができます。Webサイト全体の雰囲気を壊さないよう注意する必要はありますが、これまでにないユーザーインターフェースを実現できるでしょう。

もちろんCSS3のアニメーション機能はCSSのプロパティで扱える範囲を対象としていますので、動画を再生するような場合には、それ専用に設けられたHTML5のvideo要素やFlashの動画再生機能などを使用するのが良いでしょう。

次回はベクター形式のグラフィックス機能を実現するSVGについて解説します。