Анимация количества чисел, когда элемент находится в области просмотра, с помощью чистого CSS ⇐ CSS

[Anonymous]

Моя цель — запустить счетчик чисел от 0 до 100, как только число попадает в область просмотра.
С моим текущим решением у меня есть две проблемы:

• Число возвращается к 0, как только оно завершает отсчет до 100.
• Отсчет не «начинается», когда элемент попадает в область просмотра. , а скорее зависит от состояния прокрутки. Он учитывается по мере того, как дальше прокручивает пользователь.

Вот мой код:
@property --num {
syntax: "";
initial-value: 0;
inherits: false;
}

.number {
animation-name: counter;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: 1;
animation-fill-mode: none;
animation-timeline: view();
counter-reset: num var(--num);
font: 800 40px system-ui;
padding: 2rem;
}
.number::after {
content: counter(num);
}

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







Подробнее здесь: https://stackoverflow.com/questions/787 ... n-pure-css