Анимация свойства content

Дата публикации: 2015-11-30

От автора: а вы знали, что свойство content у псевдоклассов можно анимировать? По данным списка анимируемых свойств из спецификации мы не можем его анимировать, однако в последней версии Chrome такая возможность появилась. В демо ниже показана анимация, буква «А» превращается в «В», изменяя значение свойства content в @keyframes анимации.

Чтобы буквы переключались так же, как в демо выше, необходимо создать пустой div, в котором и будет отображаться содержимое свойства content псевдокласса. Вот так:

<div class="letter-changer"></div>

1	<div class="letter-changer"></div>

А затем с помощью @keyframes анимации мы задали свойству content другое значение и присвоили свойство animation псевдоклассу так же, как мы можем сделать это и для любого другого CSS свойства:

@keyframes changeLetter {
  0% {
    content: "A";
  }
  50% {
    color: white;
  }
  100% {
    content: "B";
  }
}

.letter-changer::after {
  animation: changeLetter 3s linear infinite alternate;
}

@keyframes changeLetter {

0% {

content: "A";

}

50% {

color: white;

}

100% {

content: "B";

}

.letter-changer::after {

animation: changeLetter 3s linear infinite alternate;

}

Может ли это пригодиться?

Данный прием не работает в большинстве браузеров и не стандартизирован, а значит, вы используете его на свой страх и риск. Но тут, как в той истории про основание Бостона и хаотичные дороги, проложенные по маршрутам передвижения коров (т.е. если это реально полезно, это может быть стандартизировано).

В статье на прошлой неделе я описывал метод инкрементации счетчика внутри прогресс бара. В этом примере используется та же самая концепция. Ниже еще одни пример в том же духе: обратный отчет пошел!

Поддержка в браузерах

Я лично тестировал анимацию свойства content, и у меня она работала только в Chrome для настольных компьютеров (на момент написания статьи это была v46). В остальных браузерах анимация не работала. Ни в десктопном Safari ни в iOS, ни в Firefox, ни в IE. Все перечисленные браузеры полностью игнорировали анимацию и показывали просто значение свойства content.

В недалеком будущем такая анимация может быть полезна, а, может быть, поддержки так никогда и не будет. Нестандартные свойства всегда в какой-то мере находятся на грани запрета, так что и поддержка в Chrome может быть не вечной.

Если необходимо изменить свойство content кроссбраузерным способом воспользуйтесь JavaScript.

Автор: Robin Rendle

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки: css3 анимация