HTMLとCSSは、Webサイトを構築する上で欠かせません。Webページの構造を指定するのがHTMLで、フォントの大きさや背景の色など、HTMLの見た目を整える役割を担っているのがCSSです。CSSを学ぶことで見栄えのよいWebページを作れるようになりますが、CSSに慣れてきたら、アニメーション方面の勉強を進めるのも手です。サイト内にアニメーションを実装したい場合、よく使われるプログラミング言語はJavaScriptですが、CSSのみでもアニメーションを実装できます。
CSSでアニメーションを実装する場合に必要なのが、@keyframesと各種のanimationプロパティです。@keyframesはアニメーションの設計図に相当し、初期状態が0%、動きが完了した状態が100%として扱われます。0%と100%の間に30%、50%、70%といった感じに途中経過を加えていくことで、滑らかなアニメーションが仕上がるわけです。
animationプロパティはCSSに用意されている、アニメーションの設定を行うための項目で、animation-name、animation-duration、animation-delayなどの多くのプロパティを使用し、具体的な設定を行います。たとえば、animation-durationプロパティではアニメーションの再生時間を設定可能です。横線が左から右に伸びていくような単純なアニメーションであっても、再生時間を変えるだけで印象は大きく異なってくるので、ぜひ色々と試してみてください。