【CSS】@keyframesとanimationの使い方を解説

今回はCSSだけでアニメーションができる@keyframesとanimationプロパティについて解説します。

 

@keyframes,animationとは?

@keyframesはCSSでどのようなアニメーションをするかを指定できます。

@keyframesは以下のように書きます。

@keyframes 任意の名前 {
    0% {
        CSSプロパティ:値;
    }
    100% {
        CSSプロパティ:値;
    }
}

 

アニメーションの名前は好きに決めることができます。

0%はアニメーションの開始時の状態、100%は終了時の状態を指定することができます。

例えばこんな感じで指定したとします。

@keyframes sizeScale {
    0% {
        width:200px;
    }
    100% {
        width:300px;
    }
}

 

この場合、アニメーション開始時はwidth:200pxの状態から始まり、終了時にはwidth: 300pxの状態で終わります。

また、0%や100%の記述は必須でないため、省略することも可能です。

0%、100%以外にも30%や56%など、アニメーションの途中の状態を指定することもできます。

 

animationとは?

animationプロパティは@keyframesで作ったアニメーションをどのように実行するか(繰り返しをするか、何秒かけてアニメーションするかなど)を指定できます。

animation関連のプロパティはたくさんありますが、animationというショートハンドプロパティを使うことでまとめて記述できます。

それぞれのプロパティは以下の通り。

  • animation-name:@keyframesで決めたアニメーションの名前を指定
  • animation-duration:アニメーションの時間を指定
  • animation-timing-function:イージングを指定
  • animation-delay:アニメーションを何秒遅らせるかを指定
  • animation-iteration-count:アニメーションを何回繰り返すかを指定
  • animation-direction:アニメーションの再生方向を指定
  • animation-fill-mode:アニメーションの開始前と終了後のスタイルを指定
  • animation-play-state:アニメーションの再生・終了を指定

 

これらのプロパティをanimationプロパティでまとめて書くことができます。指定の順番は上の順番と同じです。

animationプロパティは以下のように指定します。

セレクタ名 {
    animation: animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値;
}

 

これら全てを記述する必要はなく、特に指定しなくてもいいものは省略することができます。

@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.abc {
    animation: fadeIn 3s;
}

上記の例ではanimation-nameとanimation-durationを指定して他のプロパティは省略しています。fadeInというアニメーションを3秒かけて行うという指定のみですね。

 

また、1つのプロパティに対して複数のアニメーションを指定することもできます。

@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes fadeOut {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

.abc {
    width: 50px;
    height: 50px;
    background: #ef0000;
    animation: fadeIn 3s, fadeOut 3s 5s forwards;
}