鼠标离开后CSS过渡到原始状态答案

【问题标题】：CSS transition to original state after mouseleave鼠标离开后CSS过渡到原始状态
【发布时间】：2019-04-07 15:43:26
【问题描述】：

编辑：这与这篇文章不同，How to reverse an animation on mouse out after hover。不同之处在于，在这种情况下，转换的状态（进展程度）是必不可少的，这与前面提到的完全忽略它的帖子不同。

TL;DR：如何在动画结束后将元素动画/过渡回其原始状态？

你好，

我正在尝试制作动画面板，以便它们在悬停时“浮动”。我的问题是鼠标离开面板，而不是转换回原来的状态，它会立即跳回来。

可以在下面的 sn-p 中找到一个高度简化的版本。

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
}

div:hover {
  animation: float 2s infinite ease;
}

@keyframes float {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: translateY(-20px);
  }
}

<html>
  <head>
    <title>animate to orignal position</title>
  </head>
  <body>
    <div id='box'></div>
  </body>
</html>

如您所见，浮动它会触发类似于浮动运动的平滑动画，但是，当鼠标离开框并且动画停止时，它会突然中断。

所以我的问题是：有没有办法让盒子恢复到原来的状态，最好不使用 JavaScript（尽管所有建议都值得赞赏）。

（这可能已经在网上某个地方得到了回答，如果是这样，那么我真的很抱歉，但我无法找到解决我的问题的正确方法。如果您找到适用的解决方案，请添加副本。 )

谢谢。

【问题讨论】：

TL:DR 不，你不能用 CSS ......你所能做的就是为你的特殊情况找到一些解决方法，解决方案肯定会涉及使用简单的转换而不是动画，但我们需要找出无限动画的难点
How to reverse an animation on mouse out after hover的可能重复
@CodeGator 感谢您的加入。但是，请参阅编辑 1。

标签： javascript html css css-transitions css-animations

【解决方案1】：

您将不得不使用 JavaScript 和 CSS 过渡：

var box = document.getElementById('box')
var timer

box.addEventListener('mouseenter', function () {
  box.classList.add('up')
  timer = setInterval(function () {
    box.classList.toggle('up')
  }, 1000)
})

box.addEventListener('mouseleave', function () {
  clearInterval(timer)
  box.classList.remove('up')
})

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: transform 1s ease;
}

div.up {
  transform: translateY(-20px);
}

<html>
  <head>
    <title>animate to orignal position</title>
  </head>
  <body>
    <div id='box'></div>
  </body>
</html>

【讨论】：