CSS3 - Возможная ошибка браузера Chrome с помощью CSS-анимации?

Question

У меня есть ярлык и хочу, чтобы он отскакивал, используя анимацию CSS3. Это работает во всех последних браузерах, как шарм.

Однако, как только я добавлю к метке display:inline, эффект анимации bounce не работает в браузере Chrome. Он работает для любого другого браузера, такого как IE11, Firefox и Opera, но по какой-то причине он не работает для последнего браузера Chrome. Это ошибка Chrome или есть хорошее объяснение?

Вот тестовый пример: https://jsfiddle.net/fuex3nz1/1/

Answer 1

CSS transfroms не работает на элементах уровня рядный (я имею в виду только дисплей: встроенный и метка на уровне встроенного по умолчанию). Вы можете использовать

.label {display:inline-block;} 

Для получения дополнительной информации о CSS трансформирует свойство проверить его https://drafts.csswg.org/css-transforms/#terminology

А для элементов инлайн-уровня проверить это http://htmlhelp.com/reference/html40/inline.html