CSS3 Transitionプロパティを使いこなして背景色を滑らかに変化させる

2024-04-02

CSSで背景色を滑らかに変化させる

必要な要素

以下の要素は、背景色の遷移を理解する上で重要です。

duration: 遷移にかかる時間。秒単位で指定します。
timing-function: 遷移のタイミングを制御します。linear は一定速度で変化し、ease-in は徐々に加速し、ease-out は徐々に減速します。
delay: 遷移の開始を遅らせる時間。秒単位で指定します。

基本的な例

.element {
  background-color: red;
  transition: background-color 2s ease;
}

.element:hover {
  background-color: blue;
}

上記のコードでは、.element 要素にマウスカーソルを合わせた時に、背景色が2秒間かけて赤から青に変化します。

複数のプロパティを同時に変化させる

.element {
  background-color: red;
  color: white;
  transition: background-color 2s ease, color 2s ease;
}

.element:hover {
  background-color: blue;
  color: black;
}

高度な例

.element {
  background-color: red;
  transition: background-color 2s cubic-bezier(0.42, 0, 0.58, 1);
}

.element:hover {
  background-color: blue;
}

上記のコードでは、cubic-bezier 関数を使って、より複雑なタイミングで背景色を変化させています。

transition-property プロパティを使って、遷移させるプロパティを指定できます。

補足

上記のコードはあくまで一例です。目的に合わせて調整してください。
多くのブラウザでサポートされていますが、古いブラウザでは動作しない場合があります。
パフォーマンスに影響を与える可能性がありますので、使いすぎには注意が必要です。

基本的な例

<div class="element">
  要素にマウスカーソルを合わせてみてください！
</div>

.element {
  background-color: red;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  text-align: center;
  padding: 20px;
  transition: background-color 2s ease;
}

.element:hover {
  background-color: blue;
}

複数のプロパティを同時に変化させる

<div class="element">
  要素にマウスカーソルを合わせてみてください！
</div>

.element {
  background-color: red;
  color: white;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  text-align: center;
  padding: 20px;
  transition: background-color 2s ease, color 2s ease;
}

.element:hover {
  background-color: blue;
  color: black;
}

このコードを実行すると、画面中央に赤いボックスが表示されます。マウスカーソルをボックスに合わせると、背景色と文字色が同時に2秒間かけて変化します。

高度な例

<div class="element">
  要素にマウスカーソルを合わせてみてください！
</div>

.element {
  background-color: red;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  text-align: center;
  padding: 20px;
  transition: background-color 2s cubic-bezier(0.42, 0, 0.58, 1);
}

.element:hover {
  background-color: blue;
}

上記のコードを参考に、さまざまな効果を試してみてください。

CSSで背景色を滑らかに変化させる他の方法

@keyframes ルールを使う

@keyframes ルールを使ってアニメーションを作成し、animation プロパティを使って要素に適用することができます。

例

<div class="element"></div>

@keyframes color-change {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

.element {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  animation: color-change 2s ease infinite;
}

このコードを実行すると、画面中央に赤いボックスが表示され、2秒間かけて青に変化し、再び赤に戻るアニメーションが繰り返されます。

JavaScriptを使って、背景色の変化をプログラムすることができます。

<div id="element"></div>

<script>
const element = document.getElementById("element");

element.addEventListener("mouseover", () => {
  element.style.backgroundColor = "blue";
});

element.addEventListener("mouseout", () => {
  element.style.backgroundColor = "red";
});
</script>

ライブラリを使う

Anime.js や GreenSock Animation Platform などのライブラリを使うと、より複雑なアニメーションを簡単に作成することができます。

<div class="element"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<script>
anime({
  targets: ".element",
  backgroundColor: {
    value: "blue",
    duration: 2000,
    easing: "easeInOutSine"
  }
});
</script>