动画过渡如何结束？

Question

动画过渡如何结束？

3

在这个简单的例子中，假设您有一个元素，当鼠标悬停在其上时会触发向右移动的动画效果。然后当鼠标移动时，该元素不会立即跳回原始位置，而是以过渡的方式返回到原来的状态。

#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可以工作，但只有在第一个动画上。任何后续的动画都不会工作，除非您刷新页面。所以这是可能的吗?为什么火狐浏览器只能工作一次,然后就停止了?

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

- qw3n

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TheYaXxE · Answer 1

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

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

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

- Dondrey Taylor · Answer 2

与其使用动画和过渡属性，你可以只用过渡属性来完成这个效果。

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

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