🐥
【CSS】背景色をアニメーションで変化させたい
ボタンを押すと背景色を塗りつぶすアニメーションを作成する。
アニメーションのしくみ
背景色とアニメーションの設定はCSSに書いておく。JavaScriptを使って、押されたボタンに応じたクラス名を付与することでアニメーションを実現する。
HTML
HTMLは2つの要素を用意しておく。
背景要素としてのdivタグ。
button要素のbuttonタグ。
CSS
アニメーションの設定は.class名::after {}を使う。この中に、背景色とアニメーションを設定する。アニメーションは名前を付けて別途指定できる（この場合はslide_left_up）という名前を付けた。
.color1::after {
background-color: var(--color1);
animation-name: slide_left_up;
}
/* 動きを指定する（fromが開始時の動き、toが終了時の動き） */
@keyframes slide_left_up {
from {
transform: translate(-100%, -100%);
}
to {
transform: none;
}
}
JavaScript
ボタンが押されたら、背景要素（divタグ）にclassを付与する。
Discussion