アニメーションを付けよう

このレッスンでは、CSSアニメーションの基本を学び、JavaScriptを使わずに動きのある表現ができるようになることを目標にします。「CSS アニメーション 作り方」「@keyframes 使い方」で調べている方向けです。

@keyframesで「変化の途中経過」を指定し、animationプロパティで要素に適用すると、動きのある表現ができます。ページに軽やかな印象を加えられ、ローディング表示やボタンの注目を集める演出などによく使われます。

サンプルコードでは、@keyframes bounceの中で0%・50%・100%という3つのポイントでの位置を指定し、.ballにanimation: bounce 1s infinite;を適用してボールが跳ねるような動きを作っています。infiniteは「無限に繰り返す」という意味です。

初心者がよくつまずくのが、@keyframesで定義した名前と、animationプロパティで指定する名前が一致していない場合、アニメーションが動かないことです。名前のスペルミスがないか、まず確認してみましょう。0%から100%までの間に好きなだけ変化のポイントを指定できます。

色・大きさ・位置などほとんどのプロパティをアニメーションさせられ、JavaScriptを使わずCSSだけで動きを作れるのが大きな利点です。実務のWebサイトでも、ページの読み込み時のふわっとした表示など、さりげない演出でよく使われています。