【CSS】@keyframesを使用してアニメーションを作る

2023年4月23日

CSSを使ってアニメーション作りたいなぁ・・・

というわけで今回は@keyframesを使用してアニメーションを作る方法をお話しします。
今回は私がポートフォリオ作成の際に使用したテキストに下線を引く動きで説明します。

@keyframesについて

@keyframesとanimation

CSSでアニメーションを適用させたいときに使用する@keyframes、これはanimationというプロパティと
セットでつかうことで真価を発揮します。

アニメーションをつけるプロパティだとtransitionとかもありますが、@keyframes＆animationの方が
より高度なアニメーションを付けることが出来ます。

@keyframesの使い方

ではどのように指定するのか、まずはコードを見ていきましょう。

@keyframes hover-line {
    0% {
        background-size: 0% 100%;
        background-repeat: no-repeat;
    }

    100% {
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

上から順に説明していきましょう。

まず、一番上の@keyframes hover-line　というのは、「hover-line」と自分で名付けたアニメーションの
動きを指示します！という事です。
アニメーションの名前は任意でつけることができます。

続いて、0％　100％の所。
これは、アニメーションの始点（0％）から、終点（100％）を指定しています。
「0％⇒100％」にかけて変化させていく、というイメージです。

「0％⇒50％⇒100％」みたいな指定もでき、細かくアニメーションの動きを再現できます。

今回は、始点時「background-size:0% 100%;」⇒終点「background-size:100% 100%;」にする
アニメーションということになります。

では次はanimationの説明に移りましょう！

animationについて

animationの種類

多くの種類がありますのでここでは全て説明しません。
詳細はこちらをご参照ください。※こちらのZeroPlus様のサイトも参考にさせて頂きました！

・animation-delay　　　　 ⇒アニメーションの開始タイミングを指定
・animation-direction　　 ⇒アニメーション再生の向きを指定
・animation-duration ⇒1回のアニメーション周期が完了するまでの所有時間を指定
・animation-fill-mode　　 ⇒アニメーション実行の前後にどういう状態を適用するかを指定
・animation-iteration-count ⇒アニメーションが停止するまでの再生される回数を指定
・animation-name　　　　 ⇒アニメーションの名前を指定
・animation-play-state　　 ⇒アニメーションが実行中か停止中かを指定
・animation-timing-function ⇒アニメーションがそれぞれの周期の中でどのように進行するか指定

今回、テキストに下線を引く動きで使用したプロパティは
・animation-name
・animation-duration
・animation-fill-mode
となります。では、実際のコードを見ていきましょう。