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

1

Від автора: а ви знали, що властивість content у псевдокласів можна анімувати? За даними списку анимируемых властивостей специфікації ми не можемо його анімувати, однак в останній версії Chrome така можливість з’явилася. У демо нижче показана анімація, літера «А» перетворюється в «В», змінюючи значення властивості content у @keyframes анімації.

Щоб букви переключалися так само, як в демо вище, необхідно створити порожній div, в якому буде відображатися вміст властивості content псевдокласу. Ось так:

А потім з допомогою @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.