【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】CSSだけでMarkdownのコードにファイル名をつける
# はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.i [...]
2021年4月6日 14:39
【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る
# はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div clas [...]
2020年8月31日 8:54
【CSS】JavaScriptを使わずにハンバーガーメニューを作る
# はじめに 当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。 何よ [...]
2020年8月31日 7:34
【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装
# はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。 # CSSカスタムプロパティ [...]
2020年8月30日 18:07
【CSS】テキストを領域内に入った部分から徐々に表示
# はじめに 現在、お仕事でWebアプリを作っています。これを機会にイチからWebデザインの勉強をしようと思い、脱・Bootstrapを目指して頑張っています。 まだまだ高度なコードは書けませんが、これから少しずつCSS関連の記事も書いてい [...]
2020年8月25日 18:15