ホームページ作成/テキストの配置・装飾 (HTML,CSS)

CSS3だけで特定の要素をアニメーションさせる方法

CSS3では、「CSSだけ」で簡単なアニメーションを作成できます。スクリプトは一切不要。CSSソースを記述するだけで、文字を動かしたり、背景色を徐々に変化させたりなど、様々なアニメーションが実現できます。古いブラウザで閲覧した場合でも、ただアニメーションしない状態で表示されるだけなので、安心して活用できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スクリプト不要! 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規則を使って、簡単なアニメーションを作成する基礎を見てみましょう。
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます