有什么方法可以停止/中断 Firefox 中的 CSS3 过渡动画？答案

【问题标题】：Is there any way to stop/interrupt a CSS3 transition animation in Firefox?有什么方法可以停止/中断 Firefox 中的 CSS3 过渡动画？
【发布时间】：2012-06-12 20:48:02
【问题描述】：

我使用的是 FF 版本 13.0，并且设置了在 :hover 上发生的过渡动画。一旦我不再悬停，我希望元素恢复到原来的状态。但是会发生什么是元素继续动画，直到它到达它的最终目的地，然后返回到它的原始状态。在 Chrome/Safari (webkit) 中，元素的行为符合预期。我创建了一个非常基本的 jsfiddle 作为示例：http://jsfiddle.net/isbhod/YvMJz/

谢谢！

【问题讨论】：

这似乎是“.storyHolder:hover”上具有“位置：绝对”样式的东西，可以防止 css3 转换被中断。当我删除该样式时，动画会在鼠标移离元素时停止。至于如何或为什么我不知道。我将不胜感激在这方面的一些帮助。谢谢。

标签： firefox css transitions

【解决方案1】：

想通了：由于未知原因，被悬停的元素需要在悬停事件之前和之后具有相同的位置样式，以免影响 FireFox 中的 CSS3 过渡。我已经删除了 JS 小提琴，但无论如何都不像任何人看到的那样。

【讨论】：