背景色は通常1色だと思いますが、その色を時間の経過とともに変えていく方法を解説します。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
CSSアニメーションで背景色をじんわりと変化させていく方法
今回の元になるコードはこちらです。
<div class="bg"></div>
.bg {
background: #ffadad;
height: 300px;
width: 100%;
}
非常にシンプルで、特に解説は不要かと思います。
そして、CSSアニメーションで背景色を変化させるには、以下のコードになります。
.bg {
animation: bg-change 10s infinite;
background-color: #ffadad;
height: 300px;
width: 100%;
}
@keyframes bg-change {
0% {
background-color: #ffadad;
}
20% {
background-color: #ffadff;
}
40% {
background-color: #adadff;
}
60% {
background-color: #adffff;
}
80% {
background-color: #adffad;
}
100% {
background-color: #ffadad;
}
}
コードの意味はこちらです。
animation
- bg-change:アニメーション名
- 10s:アニメーションの時間
- infinite:無限ループ
@keyframes
でも、animation
で設定したアニメーション名を書きます。
そして、0%〜100%までの色を段階的に指定しています。
ポイントは2つ。
1つ目は、@keyframes
で0%から色を指定しているので、.bg
のbackground-color
は無くても大丈夫ですが、アニメーションが動かなかった場合に備えて書いています。
2つ目は、@keyframes
の0%と100%を同じ色を指定することで、自然にループします。
もし100%が違う色だと、このようになります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
最後の黒色が終わったら最初に戻りますが、じんわりではなくパッと変わってしまいます。
これを、0%と100%で同じ色にした場合はこうなります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
または、順方向→逆方向の繰り返しにできるalternate
を追記しても、自然にループします。
/* 修正前 */
.bg {
animation: bg-change 5s linear infinite;
}
/* 修正後 */
.bg {
animation: bg-change 5s linear infinite alternate;
}
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回は、CSSアニメーションで背景色をじんわり変化させる方法を解説しました。
自然にループさせることだけ、気をつけましょう。
以上になります。