Идея анимировать свойство контент через 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):
