コーディングメソドロジー

第87回 CSS3で作るアニメーション ~応用編~

一見複雑に見える動きも、CSS3を使うことで簡単に実現することができます。今回は数字が高速で回転しながらカウントアップするアニメーションをご紹介します。

サンプル:Coding Factory(http://coding-factory.com/)トップページ右欄「納品ページ実績」

第87回 CSS3で作るアニメーション ~応用編~

事前準備

「9」から「0」までの数字が縦に並んだ画像を用意します(1)。数字は等間隔に配置します。htmlは(2)のようになります。例では「731」という3桁の数字を表示しています。classを重ねづけすることによって、数字がかわるようにします。css(3)では、要素の背景に(1)の画像を指定します。background-repeatにrepeat-yを指定し、縦方向に繰り返します(3)-①。要素には数字1つ分の幅と高さをもたせ、overflow:hiddenを指定し、要素の高さからはみ出た背景画像を隠します(3)-②。各数字用に、background-positonの数値をかえたclassを定義しておきます(4)

事前準備

アニメーションの仕組み

背景を動かす処理を繰り返すことで、数字が回転しているように見せます。background-positonの値をアニメーションで変化させます。背景を指定した要素に、アニメーションの長さ・動き・回数等、共通の挙動を指定します(3)-③。例は、0.5秒間かけて、均一なスピードで、指定されたアニメーションを3回繰り返す指定です。次に、変化の度合いを@keyframes[任意のアニメーション名]で定義します(5)。0%がアニメーション開始時のスタイル、100%が終了時のスタイルです。例は、縦方向の背景位置が-945pxから0まで移動する「countup0」という名前のアニメーションです。定義したアニメーションは、要素にanimation-nameというプロパティで指定します(4)。例では「cnt-0」というclassに、アニメーション「countup0」を割り当てています。これにより、0.5秒かけて、数字が0から9まで移動するという動きを3回繰り返した後、もとの数字に戻ります。同様に、1~9の数字にもアニメーションを割り当てます。また、桁ごとにアニメーションを開始するタイミングをずらすことで、スロットマシンのようなギミックを加えることができます(6)
※animationプロパティの詳細は、CFN2015年2月号「css3で作るアニメーション」で詳しくご紹介しています。

アニメーションの仕組み

アニメーションの仕組み

アニメーションの仕組み

レガシーブラウザへの対応

IE9以下はcss3のanimationプロパティに対応していないため、javascriptで代用します。jQueryでは、animation()メソッドを使用できます。Background-positionプロパティはそのままでは操作できませんが、jquery.backgroundpos.jsというプラグインを読む込むことで、操作ができるようになります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム