はじめに

最近は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の効果を一方向（ゆっくり変化し即座に戻る）にする方法はあります。以下のように、transitionをhoverに設定するだけです。

.nav-link {
  color: #fff;

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

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

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

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