Question

我有一些箭头图像链接到“返回上一页”。我想在悬停它时用稍微翻译动画那些箭头。我的麻烦是当悬停结束时，箭头立即返回到他的初始状态而没有任何“过渡”。

你知道怎么做吗？

感谢。

这是我的代码：

@keyframes movingArrow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0);
  }
}

.moving-arrow:hover img {
  animation: movingArrow 1s infinite;
}

Answer 1

我尝试在codepen https://codepen.io/navdeepsingh/pen/oEwyqP为您展示演示看看

const movingArrow = document.querySelector('.moving-arrow');
movingArrow.addEventListener('mouseover', function() {
  this.classList.remove('no-animation'); 
});

.moving-arrow {
  border: 1px solid;
  border-color: #000 transparent #000 #000;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
@keyframes movingArrow {
  0% {
    transform: rotate(0);
  } 
  100% {
    transform: rotate(360deg);
  }
}
@keyframes movingArrowReset {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}

/* This you need */
.moving-arrow { 
  animation: movingArrowReset 1s;
}

.moving-arrow:hover {
  animation: movingArrow 1s infinite;
}
.no-animation {
  -webkit-animation: none !important;  
  animation: none !important;
}

<div class="moving-arrow no-animation"></div>

Answer 2

感谢您的帮助！

一位朋友在悬停结束时通过暂停动画来帮助我，这不是目标，但这种状态对我来说没问题。

使用anime.js＆amp;这codepen

 <body>

  <h3 class="moving-arrow">&larr; Back</h3>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

</body>

-

const movingArrow = document.querySelector('.moving-arrow');

let animation = anime({
  targets: movingArrow,
  translateX: '-1%',
  direction: 'alternate',
  duration: 500,
  loop: true,
  easing: 'easeInCubic',
  autoplay: false
});

movingArrow.addEventListener('mouseover', () => {
  console.log("mouseover")
  animation.play()
})

movingArrow.addEventListener('mouseleave', () => {
  console.log("onmouseleave", animation)
  animation.pause()
})

悬停结束时无限的CSS3动画

2 个答案: