はじめに
animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。
簡単にアニメーションの設定ができるので、覚えると楽しいです。
そもそもアニメーションって？
アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。
この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。
最初は @keyframes について見ていきましょう。
説明するときに英語の読み方も記載していますが、参考程度に見てください。
keyframes について
@keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。
@keyframes は、@規則のため、@から始まり、波括弧内に記述します。
このように記述します。
@keyframes 任意の名前 {
0% {
CSSプロパティ:値;
}
100% {
CSSプロパティ:値;
}
}
@keyframes の後に任意でアニメーションの名前を決められます。
例えば、横幅が拡大するアニメーションなら sizeScale 、フェードインするアニメーションなら fadeIn のように、アニメーションの名前を任意で決めてください。
0% はアニメーション開始時を表しており、100% はアニメーション終了時を表しています。
その波括弧の中にCSSプロパティを記述して、アニメーションを指定します。
@keyframes は簡単なので、実例を見ながら、どのように記述するのか見ていきましょう。
@keyframes sizeScale {
0% {
width:200px;
}
100% {
width:300px;
}
}
この場合は、アニメーション開始時に width:200px の横幅からはじまり、アニメーション終了時には width:300px になります。
アニメーション開始時の横幅は特に指定せずに、終了時だけ width:300px にしたい場合は下記のようになります。
@keyframes sizeScale {
100% {
width:300px;
}
}
終了時の 100% だけ指定すれば、終了時だけを指定したアニメーションになります。
お気づきかと思いますが、0% と 100% の記述は必須ではありません。
次は、アニメーションの途中で width:400px にし、終了時には 300px になるように記述してみましょう。
@keyframes sizeScale {
50% {
width:400px;
}
100% {
width:300px;
}
}
この場合は、アニメーションの途中（半分）で width:400px になり、終了時には width:300px になります。
アニメーションの開始から終了までの経過を 0% から 100% で指定できます。
次は、透明度を変更してみましょう。
opacity プロパティを使うことで、透明度の指定ができます。
opacity プロパティの値に 0 を指定すると透明になり、1を指定すると不透明になります。
アニメーション開始時は透明で、終了時には不透明になるように記述してみましょう。
@keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
横幅の大きさを変えたときと同じような記述なので、簡単ですね。
さらに横幅も変更してみましょう。
@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つは同じ意味です。
@keyframes sizeScale1 {
0% {
width:200px;
}
100% {
width:400px;
}
}
@keyframes sizeScale2 {
from {
width:200px;
}
to {
width:400px;
}
}
ここまで見てきて、2つ疑問があると思います。
-
@keyframesで指定したアニメーションは、どこに適用されるの？ - アニメーション開始から終了までの時間はどこで指定するの？
これらは、animation プロパティで指定します。
@keyframes では開始から終了までのアニメーションを指定しました。
animation プロパティでは、どのアニメーションを適用するのか、適用したアニメーションはいつ開始されるのか、開始されてから終了するまでの時間、アニメーションの繰り返し回数などを指定することができます。
このように、@keyframes ではアニメーションのみを指定し、animation プロパティで適用するアニメーションやアニメーションの時間などを指定します。
なぜ、別々なの？という疑問もあるかと思います。
例えば、不透明度を徐々に上げてフェードインするアニメーションを @keyframes で指定したとします。
先ほども記述しましたが、下記のように指定します。
@keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes ではフェードインするというアニメーションのみ指定しています。
例えば、h1 の要素は3秒でフェードインして h2 の要素は5秒でフェードインしたい場合でも、フェードインするアニメーションの記述は一つで済みます。
別々になっているため、h1 h2 ごとにアニメーション（@keyframes）を記述する必要はありません。
同じアニメーションなら、@keyframes を1つ記述しておけば、使い回しができます。
次は animation プロパティを見ていきましょう。
続きは Zenn で閲覧できます。
今まで無料で公開しておりましたが、記事を有料化しました。
2021 年 7 月 19 日 300 円
※ 調べて記事にまとめるのに 100 時間前後を費やしています。
※ 知識を得ること以外に時間短縮にもなるので、300 円以上の価値はあると思います。
※ 最初に購入した方々が損をしないように、値上げすることはあっても、値下げはしません。
他の CSS 関連の記事も Zenn で購入できます。
下記の記事も調べて記事にまとめるのに 100 時間前後を費やしているので、300 円以上の価値はあると思います。
ご興味のある方は、是非ご覧ください。
2021 年 7 月 19 日 各 300 円