CSSホバーアニメーション（Hover Animations）の使い方

Posted on by

CSSホバーアニメーションは、マウスカーソルが要素に重なる際に、要素の見た目や挙動を変化させる魅力的な効果を生み出します。ボタンやリンクなどのインタラクティブな要素を引き立てるために便利です。
ここでは、基本的なホバーアニメーションの作成方法といくつかの実装例を紹介します。

1. 要素の拡大縮小

要素がマウスにホバーされた時に拡大縮小するアニメーションを作成する例です。

<p class="hover-animation">ホバーしてみて</p>
.hover-animation {
  transition: transform 0.3s ease;
}

.hover-animation:hover {
  transform: scale(1.1);
}

2. 背景色の変化

マウスホバー時に要素の背景色を変化させるアニメーションの例です。

<div class="hover-animation-bg"></div>
.hover-animation-bg {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: background-color 0.3s ease;
}

.hover-animation-bg:hover {
  background-color: #e74c3c;
}

3. テキストのスライド

マウスホバー時にテキストがスライドして表示されるアニメーションの例です。

<div class="hover-slide">
  <p>ホバーして詳細を見る</p>
  <p class="hidden-text">これは詳細の内容です。</p>
</div>
.hover-slide {
  position: relative;
  overflow: hidden;
}

.hidden-text {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10px;
  transition: top 0.3s ease;
}

.hover-slide:hover .hidden-text {
  top: 0;
}

まとめ

CSSホバーアニメーションは、要素に対するユーザーのインタラクションを魅力的に演出する手法です。
拡大縮小や背景色の変化、テキストのスライドなど、様々なアニメーションを使用してユーザーエクスペリエンスを向上させましょう。
自分のウェブサイトに合ったアニメーションを試してみてください。