CSS -анимация целочисленных счетчиков ⇐ Html

[Anonymous]

Я пытаюсь получить баннер, размещенный на HTML-странице, которая использует анимацию CSS, чтобы запустить счетчик до определенного числа, но имея небольшую проблему при попытке получить более одного работы в одном и том же баннере, цифры будут подсчитать до разных сумм, зависимых от Div. < /p>

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

html,
body {
width: 100%;
height: 100%;
}

* {
box-sizing: border-box;
}

body {
padding: 0;
margin: 0;
font-family: roboto, segoe ui, Verdena, Helvetica, Sans-Serif;
font-size: 16px;
/*text-transform: uppercase;
color: #000; */
}

@property --num {
syntax: "";
initial-value: 0;
inherits: false;
}

div span.years-number {
animation: counter 5s forwards ease-in-out;
counter-reset: num var(--num);
font: 800 40px system-ui;
padding: 2rem;
}

div span.years-number::after {
content: counter(num);
}

@keyframes counter {
from {
--num: 0;
}
to {
--num: 20;
}
}

div span.project-number::after {
content: counter(num);
}

@keyframes counter {
from {
--num: 0;
}
to {
--num: 55;
}
}

div span.employee-number::after {
content: counter(num);
}

@keyframes counter {
from {
--num: 0;
}
to {
--num: 10;
}
}

div span.customers-number::after {
content: counter(num);
}

@keyframes counter {
from {
--num: 0;
}
to {
--num: 115;
}
}< /code>






+

Years of Experience








+

Complete Project








+

Employees








+

Customers

Подробнее здесь: https://stackoverflow.com/questions/783 ... r-counters