【CSS , JavaScript】矢印が一方通行で戻ってくるホバーエフェクトを実装する

矢印が一方通行で戻ってくるホバーエフェクトを実装したサンプルです。

CSSのみでマウスホバー時のみ矢印を動かす実装

CSS animation を用いたシンプルな実装です。

codepen

See the Pen One-way arrow animation CSS only by web_corder (@web_walking_nak) on CodePen.

HTML

あくまでもサンプルコードの例ですので、環境に合わせて適宜ご調整ください。

<a href="" class="c-arrow-link">
  矢印リンク
  <span class="c-arrow-link__icon">
    <span class="c-arrow-link__iconImg">→</span>
  </span>
</a>

CSS

以下のポイントのみ注意すれば大体のケースには対応できるはずです。

• アニメーションさせる矢印の親要素に overflow: hidden; を設定
• テキストなど display: inline; の要素にCSS animationは発火しないためblockなどに変更

.c-arrow-link:hover .c-arrow-link__iconImg {
  animation: arrowAnime .4s;
}
.c-arrow-link__icon {
  overflow: hidden;
}
.c-arrow-link__iconImg {
  display: block;
}
@keyframes arrowAnime {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 100% 0;
  }
  50.1% {
    translate: -100% 0;
  }
  100% {
    translate: 0 0;
  }
}

（旧）JavaScriptとCSSを組み合わせて、マウスアウト時にも矢印を動かす実装

動きはCSSがメインですが、最初からベタ書きするとページロード時にアニメーションが走ってしまうため初回発火のみJSで制御しています。

codepen

See the Pen One-way arrow animation by web_nak (@web_walking_nak) on CodePen.

HTML

<a href="" class="c-arrow-link">
  矢印リンク
  <span class="c-arrow-link--icon"></span>
</a>

CSS

.c-arrow-link {
  position: relative;
  padding-right: 40px;
}
.c-arrow-link--icon {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  margin: auto 0;
  line-height: 1;
}
.c-arrow-link--icon:before,
.c-arrow-link--icon:after {
  content: "→";
  position: absolute;
  top: 0;
  right: 0;
  animation-fill-mode: both;
  animation-duration: 0.6s;
}
.c-arrow-link--icon:after {
  transform: translateX(-100%);
}
.c-arrow-link.is-hover .c-arrow-link--icon:before {
  animation-name: transformLeftRight;
  animation-delay: 0.2s;
}
.c-arrow-link.is-hover .c-arrow-link--icon:after {
  animation-name: transformRightLeft;
}
.c-arrow-link.is-hover:hover .c-arrow-link--icon:before {
  animation-name: transformRightLeft;
  animation-delay: 0s;
}
.c-arrow-link.is-hover:hover .c-arrow-link--icon:after {
  animation-name: transformLeftRight;
  animation-delay: 0.2s;
}

@keyframes transformLeftRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes transformRightLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

JavaScript

const arrowLinks = document.querySelectorAll('.c-arrow-link');
if(arrowLinks.length > 0) {
  arrowLinks.forEach((arrowLink) => {
    arrowLink.addEventListener('mouseenter', function() {
      arrowLink.classList.add('is-hover');
    },{
      once: true
    });
  });
}

• Facebook
• X
• LinkedIn
• はてなブックマーク