知ってた？ナルホド！
こんにちは！コーダーの平原です。
2記事に渡って、『ウェブサイトにおけるアニメーションの歴史 〜CPUの時代〜』をご紹介しました。
現在は廃止されてしまったHTML要素や、Flashの登場と衰退、jQueryのアニメーションのメソッドなどの時代を経て、ウェブサイトのアニメーションはGPU処理を行う時代へと変化していきます。今回は、そんなGPU処理のアニメーションを実装することができる、CSS3についてご紹介します！
前回までの記事です。↓↓↓
1. GPUの時代
GPUは、定型的かつ膨大な処理を行うことに向いており、CPUで処理を行うには負荷が大き過ぎる画像処理は、GPUで行うことが最適とされています。
2010年代後半には、画像処理だけでなく、CPUが行う汎用的な処理も行うことができる、GPGPU(General-Purpose computing on GPU)という手法が広く普及しました。
GPUは、2Dや3Dなどの画像処理の性能を向上させるのみならず、それ以外の計算処理の性能を搭載し、利用目的は拡張されていっているのです。
2. GPU処理をするCSS3アニメーションのプロパティ
2011年頃、CSS3(CSS2.1 lavel3)が勧告され、GPU処理を行うアニメーションのプロパティが追加されました。これにより、jQueryのanimate()メソッドやfadeIn()メソッドなどのアニメーションは、CSS3で実装が可能になりました。アニメーションの動作も、CPU処理で動くjQueryのアニメーションよりも滑らかに動作する為、広く普及されてゆきました。
CSS3のアニメーションのプロパティには、transition、animationプロパティというものがあります。
- transitionプロパティ
- transitionプロパティでは、一定時間で要素の状態を変化させることができます。transitionプロパティで指定できるのは、以下のプロパティの値です。
- transition-propertyプロパティ
- 一定時間で変化をさせたいCSSプロパティを指定します。「all」を指定すると、全てのプロパティに変化をさせることができます。
- transition-durationプロパティ
- 変化をさせる時間を指定します。動きの始まりから終わりまで何秒かけるのか、秒単位(s)かミリ秒単位(ms)で指定することができます。
- transition-timing-functionプロパティ
- 動きの速度の変化を指定します。初期値は「ease」で、他にも「linear」(始まりから終わりまで一定に変化する。)、「ease-in」(緩やかに始まり、終わりに近づくと早く変化する。)や、「ease-out」(始まりは早く、終わりに近づくと緩やかに変化する。)、「ease-in-out」(緩やかに始まり、緩やかに終わる。)等を指定することができます。
速度の変化をより細かく設定する場合は、「cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)」を指定することで、変化の進行割合を3次ベジェ曲線で指定することができます。 - transition-delayプロパティ
- 動きが始まるまでの時間を指定します。秒単位(s)かミリ秒単位(ms)で指定することができます。
transitionプロパティで一括指定する際の、各プロパティの値の順番は以下の通りです。
セレクタ{
transition: transition-property
transition-duration
transition-timing-function
transition-delay;
}以下が実際にtransitionプロパティを使用してアニメーションを実装してみた例です。
各ボックスにマウスカーソルを当てると一定時間で変化します。
- animationプロパティ
- animationプロパティでは、要素にkeyframesを適用することができます。keyframesとは、0%から100%までの任意の経過地点に、変化させたいプロパティを指定することができるアニメーションのことです。animationプロパティで指定できるのは、以下のプロパティの値です。
- animation-nameプロパティ
- keyframesで定義したアニメーションの名前を指定します。複数指定する場合は、カンマ区切りで指定します。
- animation-durationプロパティ
- keyframesで定義したアニメーションの、1回分が完了するまでの時間を指定します。秒単位(s)かミリ秒単位(ms)で指定することができ、複数指定する場合はカンマ区切りで指定します。
- animation-timing-functionプロパティ
- keyframesで定義したアニメーションの、動きの速度の変化を指定します。初期値は「ease」で、他にも「linear」(始まりから終わりまで一定に変化する。)、「ease-in」(緩やかに始まり、終わりに近づくと早く変化する。)や、「ease-out」(始まりは早く、終わりに近づくと緩やかに変化する。)、「ease-in-out」(緩やかに始まり、緩やかに終わる。)等を指定することができます。
transition-timing-functionプロパティと同様に、「cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)」も指定することができます。 - animation-delayプロパティ
- keyframesで定義したアニメーションの、動きが始まるまでの時間を指定します。秒単位(s)かミリ秒単位(ms)で指定することができます。
- animation-iteration-countプロパティ
- keyframesで定義したアニメーションの、繰り返しの回数を指定します。初期値は「1」で、0%から100%までのアニメーションを1回分繰り返します。「infinite」を指定すると、無限に再生を繰り返します。
- animation-directionプロパティ
- keyframesで定義したアニメーションを、交互に反転再生させるかどうかを指定します。初期値は「normal」で、普通方向の再生でアニメーションを繰り返します。「alternate」を指定すると、奇数回で普通方向に、偶数回で逆方向の再生でアニメーションを繰り返します。
- animation-fill-modeプロパティ
- keyframesで定義したアニメーションの、再生中、再生後のCSSのスタイルを指定します。初期値は「none」で、再生後は元のスタイルが適用されます。
他にも、「backwards」(再生後はkeyframesの0%のスタイルが適用される。animation-delayプロパティを指定している場合は、再生まではkeyframes0%が適用される。)や、「forwards」(再生後はkeyframesの100%が適用される。animation-delayプロパティを指定している場合は、再生までは元のスタイルが適用される)、「both」(再生後はkeyframesの100%が適用される。animation-delayプロパティを指定している場合は、再生まではkeyframes0%が適用される。)を指定することができます。 - animation-play-stateプロパティ
- keyframesで定義したアニメーションが、実行中か停止中かを指定します。初期値は「running」で、アニメーションが実行されます。「paused」を指定すると、アニメーションは停止されます。
animationプロパティで一括指定する際の、各プロパティの値の順番は以下の通りです。
セレクタ{
animation: animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state;
}以下が実際にanimationプロパティを使用してアニメーションを実装してみた例です。
3. まとめ
GPU処理でアニメーションを実装することのできるCSS3には、transition、animationというとても利便性の高いプロパティがあります。
これらは、transformプロパティと組み合わせて使用すると、3D空間のアニメーションを実装できたりもするので、ウェブサイトの表現の幅をグッと広げてくれます。GPUがCPUの汎用的な処理も行う、GPGPUの技術も普及し、今やGPUが当たり前の時代になっているのですね。
