フェードインをCSSのみで実装する
CSSのみでフェードインなどのアニメーションを実装できる機能があると知ったので試してみました。
サンプルコード
fade-in.html
<body>
<div id="animation">
<p>フェードイン</p>
</div>
</body>
fade-in.css
#animation {
animation: fade-in 3s;
animation-fill-mode: forwards;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
cssについて解説
今回はid = animationにアニメーションを付けていきました。
使っているcssについて説明していきます。
animation
アニメーションのキーフレームを示す @keyframes アットルールの名前を指定し、変化にかかる時間も指定しました。
animationで多くの設定をまとめて指定できるようです。
animation-fill-mode
アニメーションの実行前後に、指定したスタイルを適用するかを設定します。
今回はforwardsとなっているのでアニメーション再生後は、最後のキーフレーム（to）のスタイルが適用されます。(animation-delayプロパティを指定している場合、再生までの時間は元のスタイルが適用されます。)
キーフレームについて
キーフレームとは、アニメーションの始点と終点を指定して、その間を編集する作業のことです。
CSSでは@keyframesを使用します。
fromでアニメーション前の状態、toでアニメーション後の状態を表します。
ここでは、opacity: 0; とすることで、最初は見えなく、toでopacity: 1;を指定することで、完全に見えるようになります。
参考にした記事