Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

结果在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状态解决方案。如果您想要更精细地控制动画，那么您可能想要创建两个单独的动画，一个用于向前，一个用于向后。

Answer 2

只需使用非悬停选择器上的transition即可。这里不需要animation。

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

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

转出动画

2 个答案: