关键帧动画无法在Moz和

Question

I ran into a problem where I want to animate some text inside a button on :hover. To target the text of the button I wrapped it inside a span element and target it like this:

button:hover span{
  animation:...
}

This works nicely in chrome, but fails in firefox and safari. It seems that the browsers don't support animating children of :hover which seems very weird. Does anyone know the cause of this?

I'm attaching a link with the particular use case on codepen. http://codepen.io/JonasB/pen/cded300cb982d592b9db4cb0da2191d8

Answer 1

It's due to the fact that the span is an inline element, adding property of display: inline-block fixes the issue.

This thread explains in more detail: Why can't inline elements be transformed?