CSSを使用したホバーエフェクト: 回転、フリップ、浮き上がり、色変化の実装方法

CSS

マウスホバー時の代表的なアクション（回転、フリップ、浮き上がる、色が着く）です。

CSSコードと説明を、まとめてみました。

1. 回転（Rotate）

Hover me!

   <button class="rotate-on-hover">Hover me!</button>

   .rotate-on-hover {
       transition: transform 0.3s ease-in-out;
   }

   .rotate-on-hover:hover {
       transform: rotate(360deg);
   }

1.　transition: transform 0.3s ease-in-out; は、CSSのトランジションを定義するためのプロパティと値です。このコードは、要素の transform プロパティが変化したときに、その変化を滑らかに制御するトランジションを設定しています。

• transition プロパティは、要素のスタイルの変化がアニメーション化される際に使用されます。具体的に、このプロパティは以下の情報を指定します。

• transform は、トランジションが適用されるCSSプロパティの名前です。この場合、要素の transform プロパティが変化したときにトランジションが発生します。transform プロパティは、要素の位置、サイズ、回転、スケールなどを変更するために使用されることが一般的です。

• 0.3s は、トランジションの期間（duration）を示します。このトランジションは、0.3秒かけて完了します。要素のスタイルが変化するのにかかる時間を指定します。

• ease-in-out は、トランジションのタイミング関数（timing function）を指定します。この関数は、要素の値がどのように変化するかを制御します。ease-in-out タイミング関数は、トランジションが最初に遅く始まり、徐々に速くなり、最後に遅く終了するという効果を持っています。これにより、トランジションが滑らかに行われます。

transition プロパティは、要素の回転やスケールの変化をトランジション化する際に使用されます。要素の transform プロパティが変化する瞬間から、0.3秒かけて変化が完了し、その過程が ease-in-out のタイミング関数に従って滑らかに制御されることを意味します。

2.　transformプロパティで360度回転させています。

2. フリップ（Flip）

Hover me!

   <button class="flip-on-hover">Hover me!</button>

   .flip-on-hover {
       transition: transform 0.5s ease-in-out;
   }

   .flip-on-hover:hover {
       transform: rotateY(180deg);
   }

1.と構造は同じです。transitionプロパティは要素のフリップにトランジションを追加し、transform プロパティでY軸（rotateY）を中心に180度回転させています。rotateXと指定すれば鉄棒のようにくるんと回ります。

3. 浮き上がる（Float）

Hover me!

   <button class="float-on-hover">Hover me!</button>

   .float-on-hover {
       transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
       transform: translateY(0);
   }

   .float-on-hover:hover {
       transform: translateY(-5px);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
   }

同じくtransitionプロパティで動きを滑らかに表現し、今度は回転ではなく、box-shadow プロパティで影を付け、要素の浮き上がりを表現しています。

.float-on-hoverクラスではタイミングだけ指定し、実際の挙動は
.float-on-hover:hoverクラス（マウスホバー時のスタイル・挙動を指定）の
transformプロパティでY軸の5ピクセル上に移動（translateY(-5px)）させ、
box-shadowプロパティで影を大きくしています。

4. 波紋のように色が着く（Spread Color）

Hover me!

   <button class="colored-on-hover">
     <span>Hover me!</span>
     <span></span>
   </button>

.colored-on-hover {
  font-family: 'Helvetica', 'Arial', sans-serif;
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  margin-top: 20px;
  margin-bottom: 40px;
  border-radius: 4px;
  border: solid;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.colored-on-hover span:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #dc83ac;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}

.colored-on-hover span:first-child {
  position: relative;
  z-index: 1;
}

.colored-on-hover:hover span:last-child {
  width: 150px;
  height: 150px;
  opacity: 1;
}

Copy

マウスホバーでフワッと色づく。ちょっとだけ、構造が複雑化します。

• overflow ：ボタン内の要素が親要素からはみ出した場合にクリッピングされるように指定します。
• transition ：全体の変化が0.6秒かけて、イージング関数 cubic-bezier(0.23, 1, 0.320, 1) を使用してアニメーションされます。
• transform ：要素の移動や変形が設定されます。
• opacity ：要素は初期状態では透明で表示されません。

イージング関数について

cubic-bezier(0.23, 1, 0.320, 1) は、CSSトランジションやアニメーションで使用されるタイミング関数（easing function）の一種です。この関数は、要素のスタイルが変化する際の時間経過を制御し、アニメーションがどのように進行するかを定義します。この特定のcubic-bezier 関数は、独自のカスタムタイミング関数を表しており、カスタムのアニメーション効果を提供します。

cubic-bezier 関数は、4つの数値パラメータを受け取ります。それぞれの数値の役割と意味は次の通りです：

1. パラメータ1 (x1): 最初の制御点の x 座標。この値は0から1の範囲で指定されます。x1 の値が増加すると、アニメーションはより速く進行します。

2. パラメータ2 (y1): 最初の制御点の y 座標。この値は0から1の範囲で指定されます。y1 の値が増加すると、アニメーションは最初に速く進行し、次第に遅くなります。

3. パラメータ3 (x2): 2番目の制御点の x 座標。この値も0から1の範囲で指定されます。x2 の値が増加すると、アニメーションは一時的に遅くなります。

4. パラメータ4 (y2): 2番目の制御点の y 座標。この値も0から1の範囲で指定されます。y2 の値が増加すると、アニメーションは遅く始まり、最後に速く進行します。

cubic-bezier(0.23, 1, 0.320, 1) の具体的な効果は、以下のように解釈できます：

• アニメーションは最初に遅く始まり、時間が経つにつれて速く進行します（x1 と y1 の値が1に近いため）。
• 一時的にアニメーションが遅くなり、一時停止したような効果があります（x2 の値が0.32であるため）。
• 最終的にアニメーションが速く進行し、急速に終了します（y2 の値が1に近いため）。

このようなカスタムタイミング関数を使用することで、要素のアニメーションが滑らかで自然な動きを持ち、特定のデザイン効果を達成できます。具体的な効果は、パラメータの値によって調整できます。

わざわざ<span>Hover me!</span><span></span>と囲んでいる理由

<span>Hover me!</span> と <span></span> で囲まれた構造は、ボタン内でホバーエフェクトを実現するための要素構造です。この構造の理由と役割を解説します：

1. テキスト ラベルのための <span> 要素:

   • <span>Hover me!</span> はボタン内に表示されるテキスト ラベルです。このテキストはボタン上に表示され、ボタンの内容やアクションをユーザーに伝えます。通常、ボタンにはテキストラベルが必要であり、それを囲むために <span> 要素が使用されます。

2. ホバーエフェクトのための'カラ'の <span> 要素:

   • <span></span> はホバーエフェクト自体を制御するための要素です。この要素はテキストラベルとは異なり、背景色を持ち、ホバー時に拡大・色の変化アニメーションが適用されます。
   • この要素は :last-child セレクタを使用して指定され、ボタン内の最後の子要素として選択されます。この方法を使用することで、テキストラベルとホバーエフェクト用の要素を区別し、スタイリングやアニメーションを独立して制御できます。
     
     

このように、テキストラベルとホバーエフェクトを別々の要素として構造化することで、ボタン内の特定の部分に対して異なるスタイルとアニメーションを適用できるようになります。
また、このアプローチはセマンティックなHTML構造を保ちながら、視覚的なデザインの自由度を高めるのに役立ちます。

---

これらのアクションを組み合わせ、ホバー時に目を惹くボタンのエフェクトデザインをぜひ、お試しください。

---

---

5. テキストにアンダーライン（※2020/10/11追記）

Hover me!

• NEWS
• ABOUT
• SERVICES
• CONTACT

<nav class="header-sample">
  <!-- ホバー＆アンダーライン -->
  <button class="float-on-hover"><a class="stretche-line" href="#">Hover me!</a></button>
  <ul>
    <li><a href="#" class="stretche-line">NEWS</a></li>
    <li><!-- 以下同様 --></li>
  </ul>
</nav>

nav.header-sample button.float-on-hover {
  padding: 0px 22px;
}
.header-sample ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: space-evenly;
  background-color: #e1f5e1;
}
.header-sample .stretche-line {
  color: #4d5156; /* ラインカラー */
  padding: 0 10px;
  text-decoration: none;
  line-height: 60px;
  display: block;
  position: relative;
}
.stretche-line::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 6px;
  background: #ffb300;
  bottom: 15px; /* テキストとラインの間隔 */
  transform: scale(0, 1);
  transform-origin: center top; /* アンダーラインの伸長の原点が、aタグ右端 */
  transition: transform 0.3s;   /* アニメーションの時間 */
  border-radius: 3px; /* ラインの角の丸み */
}
.stretche-line:hover::after {
  transform: scale(1, 1); /* ホバー後 X軸方向に 1（相対値）伸長 */
}

---

うまくいっている人の考え方　完全版

ジェリー・ミンチントン ディスカヴァー・トゥエンティワン 2013年04月

楽天ブックス

Amazon

Kindle

7net

honto

紀伊國屋書店

 

---