【CSS3】@keyframes と animation 関連のまとめ

# **はじめに**

`animation` プロパティと `@keyframes` を使うと、CSSだけでアニメーションの設定ができます。
簡単にアニメーションの設定ができるので、覚えると楽しいです。

# **そもそもアニメーションって？**

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

最初は `@keyframes` について見ていきましょう。
説明するときに英語の読み方も記載していますが、参考程度に見てください。

# **keyframes について**

`@keyframes` は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。
`@keyframes` は、[@規則](https://developer.mozilla.org/ja/docs/Web/CSS/At-rule)のため、`@`から始まり、波括弧内に記述します。
このように記述します。

```css:CSS（@keyframesの記述例）
@keyframes 任意の名前 {
	0% {
		CSSプロパティ:値;
	}
	100% {
		CSSプロパティ:値;
	}
}
```

`@keyframes` の後に任意でアニメーションの名前を決められます。
例えば、横幅が拡大するアニメーションなら `sizeScale` 、フェードインするアニメーションなら `fadeIn` のように、アニメーションの名前を任意で決めてください。
`0%` はアニメーション開始時を表しており、`100%` はアニメーション終了時を表しています。
その波括弧の中にCSSプロパティを記述して、アニメーションを指定します。

`@keyframes` は簡単なので、実例を見ながら、どのように記述するのか見ていきましょう。

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

この場合は、アニメーション開始時に `width:200px` の横幅からはじまり、アニメーション終了時には `width:300px` になります。

アニメーション開始時の横幅は特に指定せずに、終了時だけ `width:300px` にしたい場合は下記のようになります。

```css:CSS
@keyframes sizeScale {
	100% {
		width:300px;
	}
}
```

終了時の `100%` だけ指定すれば、終了時だけを指定したアニメーションになります。
お気づきかと思いますが、`0%` と `100%` の記述は必須ではありません。

次は、アニメーションの途中で `width:400px` にし、終了時には `300px` になるように記述してみましょう。

```css:CSS
@keyframes sizeScale {
	50% {
		width:400px;
	}
	100% {
		width:300px;
	}
}
```

この場合は、アニメーションの途中（半分）で `width:400px` になり、終了時には `width:300px` になります。
アニメーションの開始から終了までの経過を `0%` から `100%` で指定できます。

次は、透明度を変更してみましょう。
`opacity` プロパティを使うことで、透明度の指定ができます。
`opacity` プロパティの値に `0` を指定すると透明になり、`1`を指定すると不透明になります。
アニメーション開始時は透明で、終了時には不透明になるように記述してみましょう。

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

横幅の大きさを変えたときと同じような記述なので、簡単ですね。

さらに横幅も変更してみましょう。

```css:CSS
@keyframes fadeIn {
	0% {
		opacity:0;
		width:200px;
	}
	100% {
		opacity:1;
		width:400px;
	}
}
```

アニメーション開始時は、横幅が `200px` で透明なため、何も表示されませんが、アニメーション終了時には、横幅が `400px` になり、表示されるようになります。

ご覧のように `width` や `opacity` などのCSSプロパティを記述することで、拡大・縮小、透明・不透明など様々なアニメーションを指定できます。

今まで、アニメーション開始時を `0%` 、アニメーション終了時を `100%` と記述していましたが、`from` と `to` と記述することもできます。
`from` は `0%` を表し、`to` は `100%` を表します。
下記の2つは同じ意味です。

```css:CSS
@keyframes sizeScale1 {
	0% {
		width:200px;
	}
	100% {
		width:400px;
	}
}
@keyframes sizeScale2 {
	from {
		width:200px;
	}
	to {
		width:400px;
	}
}
```

ここまで見てきて、2つ疑問があると思います。

+ `@keyframes` で指定したアニメーションは、どこに適用されるの？
+ アニメーション開始から終了までの時間はどこで指定するの？

これらは、`animation` プロパティで指定します。
`@keyframes` では開始から終了までのアニメーションを指定しました。
`animation` プロパティでは、どのアニメーションを適用するのか、適用したアニメーションはいつ開始されるのか、開始されてから終了するまでの時間、アニメーションの繰り返し回数などを指定することができます。

このように、`@keyframes` ではアニメーションのみを指定し、`animation` プロパティで適用するアニメーションやアニメーションの時間などを指定します。
なぜ、別々なの？という疑問もあるかと思います。
例えば、不透明度を徐々に上げてフェードインするアニメーションを `@keyframes` で指定したとします。
先ほども記述しましたが、下記のように指定します。

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

`@keyframes` ではフェードインするというアニメーションのみ指定しています。
例えば、`h1` の要素は3秒でフェードインして `h2` の要素は5秒でフェードインしたい場合でも、フェードインするアニメーションの記述は一つで済みます。
別々になっているため、`h1` `h2` ごとにアニメーション（`@keyframes`）を記述する必要はありません。
同じアニメーションなら、`@keyframes` を1つ記述しておけば、使い回しができます。

次は `animation` プロパティを見ていきましょう。

# 続きは Zenn で閲覧できます。

今まで無料で公開しておりましたが、記事を有料化しました。

- [【CSS3】@keyframes と animation 関連のまとめ](https://zenn.dev/7968/books/14896406b4a8ac)

2021 年 7 月 19 日　300 円

※ 調べて記事にまとめるのに 100 時間前後を費やしています。
※ 知識を得ること以外に時間短縮にもなるので、300 円以上の価値はあると思います。
※ 最初に購入した方々が損をしないように、値上げすることはあっても、値下げはしません。

# 他の CSS 関連の記事も Zenn で購入できます。

下記の記事も調べて記事にまとめるのに 100 時間前後を費やしているので、300 円以上の価値はあると思います。
ご興味のある方は、是非ご覧ください。

2021 年 7 月 19 日　各 300 円

- [【CSS3】transform（変形）関連のまとめ](https://zenn.dev/7968/books/e95d9d5a9a2852)
- [【CSS3】transition（変化）関連のまとめ](https://zenn.dev/7968/books/aaf830b1b0cf4a)