【CSS】「@keyframes」を使ってアニメーションをつける基本的な方法！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「@keyframes」を使ったアニメーションのつけ方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「@keyframes」を使うと繰り返しのアニメーションなど、「transition」プロパティを使うよりも幅の広いアニメーションがつけられます。その分少し使う知識も多いですが、知っておいて損はないと思うし役立つことも多いと思うのでぜひ学習して使ってみてください！

また、下の動画でもCSSの「@keyframes」を使ったアニメーションの基本的なつけ方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「@keyframes」を使うと何ができるのか？

@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 900px;
    }
}
.box {
    animation-name: width;
    animation-duration: 2s;
}

「@keyframes」を使うとアニメーションを定義することができます。

そしてその「@keyframes」で作ったアニメーションを「animation-name」などのプロパティで、HTMLの要素に適用してあげれば、作ったアニメーションがその要素につけられる、という仕組みになっているのです。

２段階に分けれらる

「@keyframes」を使ったアニメーションのつけ方には２段階のステップがあります。

• 「@keyframes」を使ってアニメーションを定義する
• そのアニメーションを「どう適用するか」の指定をする

この２段階のステップを踏むというのが「@keyframes」の基本的な使い方になります！

なるほど分かりやすい！

「@keyframes」を使ってアニメーションを定義する方法！

それでは「@keyframes」を使ってアニメーションを定義する方法についてまとめていきますね！

「任意の名前」をつけてアニメーションを「定義」する

@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 900px;
    }
}

「@keyframes」を使ってアニメーションを定義する際にはそのアニメーションに「任意の名前」をつけることができます。

アニメーションを定義するには、上のように書けばOKです！

「@keyframes」と書いた後に、任意の名前をつけることができます。今回は「width」という名前のアニメーションネームにしました！分かりやすいものを自分でつけてあげてください！

「キーフレーム」の指定をする

@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 900px;
    }
}

「キーフレーム」の指定をすることでアニメーションの途中経過のスタイルの指定ができます。

「0%」や「100%」の部分が「キーフレーム」ですね。

これを定義することでアニメーションの完成度合いの中の「0%地点でのスタイル」と「100%地点でのスタイル」を指定します。

このキーフレームによって具体的にどんなアニメーションにするのかの指定ができる感じです。

「キーフレーム」は複数指定できる

@keyframes width {
    0% {
        width: 100px;
    }
    75% {
        width: 300px;
    }
    100% {
        width: 900px;
    }
}

「キーフレーム」は「0%」と「100%」の他にも「75%」など複数の途中経過の指定ができます。

つまり２個以上の「キーフレーム」の指定をしてあげればOKということです！

「キーフレーム」の「0%」と「100%」を表すキーワードも用意されている

@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 900px;
    }
}

@keyframes width {
    from {
        width: 100px;
    }
    to {
        width: 900px;
    }
}

アニメーションの始点である「0%」と、終点の「100%」は重要なので、それを表す「キーワード」も用意されています。

上に書いた２つのアニメーションはどちらも同じものを表しています。お好みでこれらのキーワードも使ってみてください！

「0％」は「from」と書き換えれますし、

「100%」は「to」と書き換えることができます。

作ったアニメーションを「どう適用するか」の指定方法！

それでは作ったアニメーションを「どう適用するか」の指定方法！をまとめていきますね！

「animation-name」プロパティを使って、どの要素にアニメーションを適用するのか指定する

@keyframes width {
    from {
        width: 100px;
    }
    to {
        width: 900px;
    }
}
.box {
    animation-name: width;
    animation-duration: 2s;
}

「animation-name」プロパティを使って、どの要素にアニメーションを適用するのか指定します。

「animation-name」プロパティを使わないと、ただアニメーションを定義しただけになってしまうので、作ったアニメーションが使われない感じになってしまします。作って満足せず、しっかり適用したい要素に指定しましょう！

「animation-duration」プロパティを使って、１回のアニメーションにかかる時間の指定をする

@keyframes width {
    from {
        width: 100px;
    }
    to {
        width: 900px;
    }
}
.box {
    animation-name: width;
    animation-duration: 2s;
}

「animation-duration」プロパティを使うと、1回のアニメーションにかかる時間の指定をすることができます。

「animation-duration」の初期値は「0s」なので、しっかり指定しないとアニメーションっぽくすることができないので注意してください！

最低限のアニメーションは「animation-name」と「animation-duration」の指定をすればOK！

最低限のアニメーションをつけるには下記の２つのプロパティの指定が必要です。

• 「animation-name」
• 「animation-duration」

これら２つのプロパティの設定をしておけば、最低限のアニメーションはつけられます。なのでこれらの設定をするのが基本形ということですかね。

「アニメーションをどう適用するのか」の指定ができるプロパティはたくさんある

「animation-name」と「animation-duration」だけでなく「アニメーションをどう適用するのか」の指定ができるプロパティはたくさんあります。

それらは下記の通りです。

• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• animation-timing-function

これらのプロパティの使い方は、また別の記事で解説しようと思います。この記事は基本的なアニメーションのつけ方だけ扱いますね。

参考リンク！

仕様書。
https://drafts.csswg.org/css-animations/

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/animation

おすすめの再生リスト！

僕はYouTubeでプログラミングの解説をしているのですが、こちらは再生リスト「CSSのアニメーション編」です。

「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。

こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「@keyframes」を使うとアニメーションを定義することができる。

「@keyframes」を使ったアニメーションのつけ方には下記の２段階のステップがある。

• 「@keyframes」を使ってアニメーションを定義する
• そのアニメーションを「どう適用するか」の指定をする

「任意の名前」をつけてアニメーションを「定義」することが可能。

アニメーションは「キーフレーム」の指定をする形で定義する。

「キーフレーム」は複数指定できる。

「キーフレーム」の「0%」と「100%」を表すキーワードも用意されている。

「animation-name」プロパティを使うと、どの要素にアニメーションを適用するのか指定することができる。

「animation-duration」プロパティを使うと、１回のアニメーションにかかる時間の指定をすることができる。

最低限のアニメーションは「animation-name」と「animation-duration」の指定をすればOK！

「アニメーションをどう適用するのか」の指定ができるプロパティはたくさんある。

それらは下記の通りです。

• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• animation-timing-function

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「@keyframes」を使ったアニメーションの基本的なつけ方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！