Аниматическое число приращений с CSS (Animate CSS @Property Integer с ключевыми кадром) ⇐ Html

[Anonymous]

Существует отличный способ анимировать увеличение числа/уменьшение только с помощью CSS или с помощью API веб -анимации для динамических значений (см. Форнирование кода).
, создав пользовательский CSS @Property в качестве типа целочисленного данных - мы можем анимировать его с помощью ключевых кадров. Когда счетчик проходит 999999 - он устанавливается на 0 для чего -то большего, чем это число. Если я использую CSS без JavaScript - число немного выше, но в конечном итоге также поступает в ноль. Тип данных-это 32-разрядное целое число, которое должно работать до 2147,483,647.

Код: Выделить всё

document.getElementById('count1').animate([
{ '--num': 0 },
{ '--num': 10000 },
{ '--num': 999999 }
], {
duration: 3000,
fill: 'forwards',
iterations: 1
});

document.getElementById('count2').animate([
{ '--num': 0 },
{ '--num': 100 },
{ '--num': 1000000 }
], {
duration: 2000,
fill: 'forwards',
iterations: 1
});< /code>
@property --num {
syntax: "";
initial-value: 0;
inherits: false;
}

div {
counter-set: num var(--num);
font-size: 40px;
font-weight: bold;
}

div:after {
content: counter(num);
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/669 ... -keyframes