Анимация ключевых кадров не работает с элементом :hover в moz и

Я столкнулся с проблемой, когда я хочу анимировать некоторый текст внутри кнопки на: hover. Чтобы нацелить текст кнопки, я обернул его внутри элемента span и нацелил его следующим образом:

button:hover span{
  animation:...
}

Это хорошо работает в Chrome, но не работает в Firefox и Safari. Похоже, что браузеры не поддерживают анимацию дочерних элементов :hover, что кажется очень странным. Кто-нибудь знает причину этого?

Я прилагаю ссылку с конкретным вариантом использования на codepen. http://codepen.io/JonasB/pen/cded300cb982d592b9db4cb0da2191d8


css css-animations hover keyframe
person JonasB    schedule 15.01.2016    source источник
comment
Эта проблема аналогична stackoverflow .com/questions/31768220/. Не совсем обман, потому что это для перехода, а это анимация, но я привожу ее здесь, потому что вы можете найти объяснение, представленное в этом ответе, полезным. Анимации и переходы обычно работают аналогично друг другу.   -  person Harry    schedule 15.01.2016

Ответы (1)


arrow_upward
4
arrow_downward

Это связано с тем, что span является встроенным элементом, поэтому добавление свойства display: inline-block устраняет проблему.

В этом потоке более подробно объясняется: Почему встроенные элементы не могут быть преобразованы?

person Raevenk    schedule 15.01.2016
comment
Спасибо, я так отвлекся на то, что это работает в хроме и никогда об этом не задумывался. - person JonasB; 15.01.2016