css - 悬停结束时的无限 CSS3 动画

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>