Идея анимировать свойство контент через keyframe пришла не так давно, в ходе работы. И как оказалось это возможно, но только в Google Chrome. Что влечет за собой большие неудобства, но в тоже время, позволяет сделть некие «пасхальные» сюрпризы для пользователей этого браузера.
Как сделать CSS анимация свойства content
Сначала подготовим HTML, то есть нам потребуется элемент, к которому мы будем применять CSS анимацию.
<div class="letter-changer"></div>
Итак, div, в котором будет происходить анимация, у нас готов. Теперь напишем анимацию (она может быть разной, как вы понимаете, в нашем примере для наглядности, будут меняться буквы:
@keyframes changeLetter { 0% { content: "A"; } 50% { content: "B"; } 100% { content: "C"; } }
Анимация готова, теперь нужно её назначить. Так как у основного дива нельзя изменить свойство content, то добавим в него псевдоэлемент :after, и анимируем его.
.letter-changer:after { animation: changeLetter 3s linear infinite alternate; content: ""; display:block; }
Всё!
Теперь он будет анимироваться, но помните, что это работает только в Chrome, и нет никакого стандарта, то есть возможно оно только в Chrome и останется.
Пример, как это работает (только в Chrome):