2022.04.28　【更新日 : 2023.11.02】

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

Category：: css / js
Tags：: css, css3, JavaScript, Vanilla JS, アニメーション, スライド

矢印が一方通行で戻ってくるホバーエフェクトを実装したサンプルです。
動きはCSSがメインですが、最初からベタ書きするとページロード時にアニメーションが走ってしまうため初回発火のみJSで制御しています。

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
    });
  });
}