PR

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

2012年4月26日(木)
土井 毅(著)山田祥寛(監修)

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

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

ここまでは「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について解説します。

  • CSS3で実現するアニメーションサンプル(2)

著者
土井 毅(著)山田祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています