1_3 Webアニメーション(CSSアニメーション)の場合

Webページで見られるCSSアニメーションも、人間の錯覚によって生まれるという点では、映画のアニメーションと同じです。ただし、CSSアニメーションでは、全コマを描くわけではありません。変化のポイントとなる時点をキーとして(キーフレーム)そこだけは描き、ポイントとポイントの間は、Webブラウザが補間する、という少しずぼらな方法で表現されます。

上図は、緑の丸が横に伸びるアニメーションを示しています。まず最初の状態があり、1つめのキーフレームでは左右に伸びています。ブラウザは最初の状態と、1つめのキーフレームを読み取り、その間の、緑の丸が時間経過とともに横に伸びる伸び具合を計算して、表示します。これが高速で行われるので、人間の目には動いて(アニメーションして)見えるのです。

CSSでは、HTML要素に設定した属性(CSSプロパティ)を変化させることで、アニメーション表現を実現します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA