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

35

Также рекомендуем прочитать:

Понравилась или помогла статья?
Купите мне кофеКупите мне кофе