css - 从动画中过渡

Question

因此，在这个简单的示例中，假设您有一个元素，悬停时有一个将其向右移动的动画。然后，当鼠标移动而不是直接跳回原始位置时，它会转换回该状态。

#test{
  position:absolute;
  left:0;
  transition:left 3s linear;
}
#test:hover{
  animation:move 4s linear;
}
@keyframes move{
  0%{
    left:0;
  }
  100%{
    left:300px;
  }
}

<div id="test">Hover</div>

结果在任何 Edge 或 Chrome 中都不起作用。 Firefox 有效，但仅适用于第一个动画。在您刷新页面之前，任何后续动画都不会起作用。这可能吗？为什么 Firefox 工作一次然后停止？

所以我更清楚这是一个简单的例子。当然这可以通过转换来完成，但是转换是有限的并且并不总是可能的。此外，如果您注意到返回动画是不可能的，因为它可能来自任意点。

Answer 1

无需使用动画和过渡属性，您可以仅使用过渡属性来完成此操作。

#test{
  position:absolute;
  left: 0;
  transition: left 4s linear;
}
#test:hover{
  left: 300px;
  transition: left 4s linear;
}

您遇到的问题是动画必须完成才能转换到不同的状态。此外，当您将鼠标移开时，需要将另一个动画添加到非悬停选择器中，该动画从 300px 回到 0px。要解决此问题，只需在悬停和非悬停选择器中使用过渡属性。然而，这实际上只是一个 2 态解决方案。如果您想要更精细地控制动画，那么您可能需要创建两个单独的动画，一个用于前进，一个用于后退。