【CSS】transitionの効果を一方向(ゆっくり変化し即座に戻る)にする

2020年8月27日 15:04

はじめに

最近はtransitionを使った動きのあるWebサイトがたくさんあります。まったく動きのない静的なページを見つけるのが難しいくらいです。

今回は、transitionの効果を一方向(ゆっくり変化し即座に戻る)にする方法について書きたいと思います。

transitionは双方向(ゆっくり変化しゆっくり戻る)の変化

transitionのよくある例としては、マウスをリンク要素に乗せたときにゆっくり色を変えたりすることです。

<a href="/" class="nav-link">Home</a>
.nav-link {
  color: #fff;
  transition: color .5s;

  &:hover {
    color: #f00;
  }
}

※CSSはSASSで書いています。

このように、色を変えたい要素にtransitionを設定することで、要素の変化の仕方を指定することができます。

上の例では「colorを0.5秒かけて変化」と設定しているので、マウスを要素に乗せると0.5秒かけて色が#fffから#f00に変化します。同様に、マウスを要素から離すと0.5秒かけて色が#f00から#fffに変化します。

つまり、通常はtransitionの効果は双方向(ゆっくり変化しゆっくり戻る)であると言えます。

一方向(ゆっくり変化し即座に戻る)の変化

双方向(ゆっくり変化しゆっくり戻る)に作用するtransitionですが、まれに一方向(ゆっくり変化し即座に戻る)に作用させたいときがあります。

ここでは詳しく述べませんが、ハンバーガーメニューを作っているときに、ハンバーガーメニューからマウスを離したら変化を即座に戻したい場面があったのです(この辺の話は別記事で書く予定)。

CSSにはhoverはあれどleaveのような擬似クラスはありません(あったとしてもtransitionによる効果からは逃れられませんが)。「マウスが乗ったとき」と「マウスが離れたとき」は分離できないのでしょうか。

いいえ、transitionの効果を一方向(ゆっくり変化し即座に戻る)にする方法はあります。以下のように、transitionhoverに設定するだけです。

.nav-link {
  color: #fff;

  &:hover {
    color: #f00;
    transition: color .5s;  // transitionをhoverに設定
  }
}

サンプルを作りましたので試してみてください(サンプルはわかりやすいようにボックスにマウスを乗せると色が変化します)。

上のボックスにマウスを乗せると、ゆっくり赤から青に変わり、マウスを離すとゆっくり青から赤に戻ります。対して下のボックスにマウスを乗せると、ゆっくり赤から青に変わり、そしてマウスを離すと即座に青へと戻ります。

使うシーンはあまりないかもしれませんが、覚えておくといざというときにきっと役立つはずです。

関連記事

【CSS+JS】メインコンテンツの裏から現れるフッターの実装方法
# はじめに オシャレなサイトなどでたまに見かける「メインコンテンツの裏から現れるフッター」の実装方法について説明します。 # サンプル <iframe height="392" style="width: 100%;" scrollin [...]
2021年10月18日 13:26
【CSS+JS】背景画像の視差効果(パララックス)を実装する方法
# はじめに JavaScriptプラグインを使わずに、背景画像の視差効果(パララックス)をVanilla JS(ピュアなJavaScript)だけで実装する方法について説明します。 # サンプル まず、背景画像の視差効果(パララックス) [...]
2021年10月17日 12:08
【CSS+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード
# はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラ [...]
2021年6月2日 15:15
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
# はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外と [...]
2021年5月20日 23:23
【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法
# はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 # 実装 ## サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 <i [...]
2021年5月20日 13:26