CSSでhoverのINとOUTで違う動きをする効果の作り方

今回はたまに見かけるマウスインとマウスアウトで動きが違うエフェクトの作り方についてメモしていこうと思います。
JavaScriptを使うやり方もあるんですが、今回はCSSだけで実現するやり方の一つをざっくり解説していきます。

インではtransition、アウトではanimation

理屈はそんなに難しくなくてcssで動きを付ける為の二つの手段、transitionとanimationをそれぞれにつけるだけです。
サンプルは下記のような感じになります。

<a class="effect" href="test.html">サンプルテキストリンク</a>

このHTMLにグレーの背景マットがマウスオンすると左からスライドインしてマウスアウトすると右へスライドアウトするようcssを付けていみます。

effect{
  position: relative;
  overflow: hidden;
  /* 擬似要素を動かすことにします */
  &::before{
      content: "";
      display: block;
      position: absolute;
      top:0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #ccc;
      z-index: 0;
      /* 初期状態ではscaleで幅をゼロにして見えなくします */
      transform:scaleX(0);
      transform-origin: left center;
      /* ここにOUT時の動きであるanimationを設定 */
      animation-name:effect_animation;
      animation-duration: 0.4s;
    }
  &:hover{
    &::before{
        transform:scaleX(1);
        /* transitionをhoverの中に書くのはIN時はアニメーションさせるけど、OUT時はアニメーションさせないため */
        transition:transform 1s cubic-bezier(0.23, 1, 0.32, 1);
        /* hoverの際はanimationをオフにするため */
        animation:none;
    }
  }
}
@keyframes effect_animation {
    0% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(1) translateX(100%);
    }
}

今回は擬似要素に効果を付けましたがtransitionとanimationの2つを駆使すればインとアウトで様々な効果を付ける事が出来ます。

留意する点としてはインの終わりとアウトの始まりの見た目を同じにしないとひとつながりの動きには見えない事でしょうか。

自分のメモ用に書きましたが参考になれば幸いです。