知ってた?ナルホド! BLOG

2019.08.19

CPU、GPUを知る!『ウェブサイトにおけるアニメーションの歴史 〜GPUの時代 CSS3〜』

WRITTEN BY

 | 

HIRAHARA NATSUMI

CPU、GPUを知る!『ウェブサイトにおけるアニメーションの歴史 〜GPUの時代 CSS3〜』

こんにちは!コーダーの平原です。
2記事に渡って、『ウェブサイトにおけるアニメーションの歴史 〜CPUの時代〜』をご紹介しました。
現在は廃止されてしまったHTML要素や、Flashの登場と衰退、jQueryのアニメーションのメソッドなどの時代を経て、ウェブサイトのアニメーションはGPU処理を行う時代へと変化していきます。今回は、そんなGPU処理のアニメーションを実装することができる、CSS3についてご紹介します!

前回までの記事です。↓↓↓

  1. GPUの時代
  2. GPU処理をするCSS3アニメーションのプロパティ
  3. まとめ

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が当たり前の時代になっているのですね。

PAGE TOP