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

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

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

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

<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;
}

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

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

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

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

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

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

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

Автор: Robin Rendle

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

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree