css 动画 - 鼠标平滑答案

【问题标题】：css animation - mouse out smoothlycss 动画 - 鼠标平滑
【发布时间】：2018-08-24 22:53:39
【问题描述】：

大家好，我的动画需要帮助，我创建了一个循环左右移动的按钮，但鼠标从按钮移出时出现问题。取出鼠标后不流畅会跳转到起始位置。

.hover {
  padding: 20px 30px;
  font-size: 20px;
  font-weight: 500;
  background: rgba(33, 150, 243, 1);
  transition: all .6s linear;
  color: #fff;
  margin: 50px;
  border: none;
}

.hover:hover {
  animation: pulse .6s infinite alternate;
  transition: all .6s linear;
}

@keyframes pulse {
  0% {
    transform: translate(0px)
  }
  100% {
    transform: translate(10px)
  }
}

<div>
  <button class="hover">Move Right And left</button>
</div>

知道我在这里做错了什么吗？

谢谢:)

【问题讨论】：

当涉及到动画时，你无法避免这一点
相关：stackoverflow.com/questions/51968018/…
好的，答案很简单，我不能用动画过渡，对吧？
是的，给动画添加过渡是没有意义的，所以它不会像你想象的那样工作
“所以它不会像你想象的那样工作” 可悲的是:(，但感谢您的回答。

标签： html css loops animation transform

【解决方案1】：

如果可以接受 Javascript 解决方案，您可以使用 Web Animations 而不是 CSS 动画。
对于某些浏览器，您可能需要Polyfill。

var btn = document.querySelector("button");

var a = btn.animate(
  [
    {transform: 'translateX(0px)'},
    {transform: 'translateX(10px)'},
    {transform: 'translateX(0px)'}
  ],
  1200
);

a.pause();

btn.addEventListener('mouseover', () => {
  btn.classList.add('hover');
  a.play();
});

btn.addEventListener('mouseout', () => btn.classList.remove('hover'));

a.addEventListener(
  'finish',
  () => {
    if (btn.classList.contains('hover'))
      a.play();
  }
);

button {
  margin: 50px;
  padding: 20px 30px;
  border: none;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  background: rgba(33, 150, 243, 1);
}

<!-- Polyfill -->
<script src="https://web-animations.github.io/web-animations-demos/components/web-animations-js/web-animations.min.js"></script>

<button>Move Right And left</button>

【讨论】：