Chapter 01無料公開

はじめに

7968
7968
2021.07.18に更新
このチャプターの目次

@keyframes と animation プロパティを使うと、CSS だけでアニメーションの設定が可能です。
手軽にアニメショーンの設定ができるので、覚えると表現の幅が広がります。

アニメーションとは?

アニメーションの意味を調べると「動画」と書かれていますが、動画というよりは、「動き」または「変化」という意味で捉える方が理解しやすいです。
この記事でも、アニメーションという単語を用いて説明しますが、「動き」または「変化」という意味で読んでください。

最初は @keyframes について見ていきましょう。
説明するときに英語の読み方も記載していますが、ネイティブ発音ではないので参考程度に考えてください。