0

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

JonasB
  • 328
  • 2
  • 11
  • This issue is similar to http://stackoverflow.com/questions/31768220/why-does-my-transform-snap-back/31768872#31768872. Not quite a dupe because that is for transition and this one is animation but I am linking it here because you may find the explanation provided in that answer helpful. Animations and Transitions generally work in a way similar to each other. – Harry Jan 15 '16 at 11:41

1 Answers1

4

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?

Community
  • 1
  • 1
Raevenk
  • 246
  • 1
  • 3
  • Thank you, I was so distracted by the fact that it worked in chrome and never thought about it. – JonasB Jan 15 '16 at 11:21