Посмотрите несколько интересных трюков анимирования числа с помощью переменных CSS, как в этом примере ниже:
Уловка состоит в том, чтобы объявить настраиваемое свойство CSS как целое число. Таким образом его можно интерполировать как и любое другое целое число.
Пример кода, который демонстрируется, выглядит примерно так и имеет довольно своеобразное начало:
@property --num {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}
div {
transition: --num 1s;
counter-reset: num var(--num);
}
div:hover {
--num: 10000;
}
div::after {
content: counter(num);
}
Но подождите ... что это за странная вещь @property --num в первой строке? Это CSS-версия JavaScript CSS.registerProperty, которую мы используем для объявления настраиваемых свойств CSS как определенного типа. В противном случае настраиваемые свойства - это строки, которые гораздо более ограничены в том, как их можно использовать. Спасибо, Гудини!
У меня такое чувство, что этот CSS.registerProperty откроет нам, веб-разработчикам, целый новый мир возможностей, от анимации фоновых градиентов до анимации счетчиков и…?