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

第75回 CSS3で作るアニメーション

JavaScriptを使用せず、CSS3のみで簡単なアニメーション効果を付与する方法をご紹介します。

CSS3でアニメーションを構成するプロパティ

サンプルコードについて説明します。アニメーションの動きとしては、box01というdiv要素の伸縮を繰り返すというアニメーションです。下記はそれぞれのプロパティの解説です。

  • ■animation-name
    アニメーションのキーフレーム名を指定します。要素に対して指定されたキーフレームのアニメーションを実行することができます。
  • ■animation-duration
    アニメーションが完了するまでの時間を指定します。サンプルの5sは5秒を意味します。
  • ■animation-timing-function
    アニメーションの進行割合を指定します。easeのほかに、linear、ease-in、ease-out、ease-in-out、cubic-bezier 等があり、動きに緩急を与えることができます。
  • ■animation-delay
    アニメーションを遅延再生させます。サンプルの1sは1秒を意味し、1秒後にアニメーションを実行します。
  • ■animation-iteration-count
    アニメーションの繰り返し回数を1~の数値で指定します。Infiniteを指定すると、何度も繰り返しアニメーションが実行されます。
  • ■animation-direction
    アニメーションの方向指定をします。alternateを指定すると奇数回は普通に再生し、偶数回は逆再生されます。
  • ■animation-fill-mode
    アニメーションの実行前、実行後はどのようなスタイルにするかを指定します。backwardsを指定するとアニメーション実行前にキーフレームの最初のスタイルが即座に適用され、forwardsを指定するとアニメーションの実行後にキーフレームの最後のスタイルが適用されます。bothを指定するとforwardsとbackwardsの両方が適用されます。
  • ■@keyframes {}
    アニメーション実行開始(0%)から終了(100%)までのスタイルをパーセント区切りで指定します。この中で書かれたスタイルがアニメーションとして実行されます。

サンプルコード

サンプルコード

アニメーションイメージ図

アニメーションイメージ図

サンプルコードでは-webkit-を指定していますが、FirefoxやIEにアニメーションを実行させたい場合は、-moz--ms-といったブラウザ毎にベンダー プレフィックスを指定したCSSを記述する必要があります。また、IEについてはバージョンが9以下のものはアニメーションのCSS3が対応していない ため、バージョン10以上でなければ確認ができません。

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

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

    お問い合わせ

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

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