Search code examples
cssgoogle-chromeanimationbounce

CSS3 - Possible Chrome browser bug with CSS animation?

I have a label and want to let it bounce using CSS3 animation. This works in all latest browsers like a charm.

However, once I add a display:inline to the label, the bounce animation effect doesn't work on Chrome browser. It does work for every other browser like IE11, Firefox and Opera, but for some reason it does not work for the latest Chrome browser. Is this a Chrome bug or is there a good explanation for it?

Here is a test case: https://jsfiddle.net/fuex3nz1/1/

Solution

  • CSS transfroms does not works on inline level elements(I mean only display: inline and label is by default inline level). You can use

    .label {display:inline-block;}

    For more info about CSS transforms property check it https://drafts.csswg.org/css-transforms/#terminology

    And for inline-level elements check this http://htmlhelp.com/reference/html40/inline.html