- Coding Methodology
- 第75回 CSS3で作るアニメーション
第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以上でなければ確認ができません。
