关键帧动画不适用于：moz 中的悬停元素和

Posted 2023-03-06

【中文标题】关键帧动画不适用于：moz 中的悬停元素和

【英文标题】：Keyframes animation not working on element of :hover in moz and

【发布时间】：2016-04-20 22:44:11

【问题描述】：

我遇到了一个问题，我想为 :hover 上的按钮内的一些文本设置动画。为了定位按钮的文本，我将它包裹在一个 span 元素中并像这样定位它：

button:hover span
  animation:...

这在 chrome 中运行良好，但在 Firefox 和 safari 中失败。似乎浏览器不支持 :hover 的动画孩子，这看起来很奇怪。有人知道这是什么原因吗？

我在 codepen 上附加了一个特定用例的链接。 http://codepen.io/JonasB/pen/cded300cb982d592b9db4cb0da2191d8

【问题讨论】：

这个问题类似于***.com/questions/31768220/…。不是很受骗，因为那是为了过渡，而这个是动画，但我在这里链接它，因为您可能会发现该答案中提供的解释很有帮助。动画和过渡通常以彼此相似的方式工作。

【参考方案1】：

由于span是内联元素，添加display:inline-block属性解决了这个问题。

这个帖子有更详细的解释：Why can't inline elements be transformed?

【讨论】：

谢谢，我被它在 chrome 中工作的事实分心了，从没想过。