Невозможно оживить псевдоэлементы с -webkit-переходом. Скрипка ниже показывает, что я имею в виду при запуске в Chrome/Safari, я полагаю, что это не поддерживается прямо сейчас?
Переходы CSS с: перед и: после псевдоэлементов
Ответ 1
Исправлено в Google Chrome 3 января 2013 года.
К настоящему времени (я обновляю этот список) он поддерживается в:
- FireFox 4.0 и выше
- Chrome 26 и выше
- IE 10 и выше
Ожидание Safari и Chrome для Android, чтобы вытащить эти обновления.
Вы можете проверить его самостоятельно в своем браузере или
См. таблицу поддержки браузера.
Ответ 2
Ну, на самом деле, вы можете.
Вам просто нужно использовать часто забытое значение inherit.
К сожалению, мы не можем (пока) напрямую ориентироваться на псевдоэлементы с помощью пользовательских анимаций, но мы можем позволить им совместно использовать одну и ту же анимацию "родительского" элемента, наследуя свойства, которые мы хотим оживить.
Смотрите мою скрипку здесь.