スクリプト不要! CSSだけでアニメーションを作成できる

CSS3では、スクリプトを併用することなく、CSSだけで簡単なアニメーションが作れます。文字を動かしたり、表示色を徐々に変えたりなど、CSSで作った装飾を自由自在に変化させられます。実現方法は、CSSソース中に、アニメーションの条件を指定する「animationプロパティ」や、アニメーションの動作内容を指定する「@keyframes規則」などの記述を加えるだけです。とても簡単に、様々なアニメーションが作成できます。

スクリプトを使わずに、スタイルシートだけでアニメーションが作れる

スクリプトを使わずに、スタイルシートだけでアニメーションが作れる


アニメーションというと、JavaScriptなどのスクリプトを活用しないと実現できないイメージがあるかも知れません。しかし、CSS3なら、アニメーションの実現にスクリプトは不要です。スクリプトを活用して作るアニメーションよりも簡単に実現できると言えるかもしれません。

最低限、「スタート時点の装飾」と、「ゴール時点の装飾」の2つを指定するだけ
最低限、開始と終了の装飾を指定するだけ

最低限、開始時点(from)と終了時点(to)の装飾を指定するだけ

CSS3で作るアニメーションは、「スタート時点の装飾」と「ゴール時点の装飾」の2つを指定するという簡単な記述で作れます。色・サイズ・位置など、アニメーション途中の「中間の値」は、自動計算されて表示されます。

なお、必要に応じて、途中のポイントでの装飾(例えば「30%進行した時点での装飾内容」など)も指定できますから、細かく動きを制御することもできます。


 

アニメーション非対応のブラウザでも、表示自体には問題ない

代表的なブラウザの最新版で表示可能

代表的なブラウザの最新版で表示可能

CSS3によるアニメーション機能は、Internet Explorer、Firefox、Chrome、Safari、Operaなど、代表的なブラウザの最新版で表示できます。例えばIEなら、IE10以降で対応しています。

※古いバージョンでは、ベンダープレフィックスを付加しないと表示されません。詳しくは後ほどご紹介いたします。

CSS3のアニメーション機能に対応していない古いブラウザであっても、対象の要素は「アニメーションしない(普通の)状態」で表示されるだけです。特に表示が崩れたり、消えてしまったりすることはありませんから、安心して気軽に利用できます。

今回は、CSS3の各プロパティなど使って、特定の要素をアニメーションさせる方法を、簡単にご紹介いたします。

それでは、まずは、animation関連プロパティと、@keyframes規則を使って、簡単なアニメーションを作成する基礎を見てみましょう。