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

【问题标题】：Keyframes animation not working on element of :hover in moz and关键帧动画不适用于：moz 中的悬停元素和
【发布时间】：2016-04-20 22:44:11
【问题描述】：

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

button:hover span{
  animation:...
}

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

【问题讨论】：

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

【解决方案1】：

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

【讨论】：