Try this..

div::after {
  font: 800 40px system-ui;
  content: counter(num);
  animation: counter 5s linear infinite alternate;
  counter-reset: count 0;
}

@keyframes counter {
  0% {
    counter-increment: count 0;
  }
  10% {
    counter-increment: count 1;
  }
  20% {
    counter-increment: count 2;
  }
  30% {
    counter-increment: count 3;
  }
  40% {
    counter-increment: count 4;
  }
  50% {
    counter-increment: count 5;
  }
  60% {
    counter-increment: count 6;
  }
  70% {
    counter-increment: count 7;
  }
  80% {
    counter-increment: count 8;
  }
  90% {
    counter-increment: count 9;
  }
  100% {
    counter-increment: count 10;
  }
}

You can try this –

HTML

Counter
<div id="demo">0</div>

CSS

#demo{  
font: 800 40px system-ui;
}  
body {
 margin: 2rem;
}

JavaScript

let x=0;
let c=setInterval(function() {
 document.getElementById("demo").innerHTML = x;        
 x++;  
 if(x==101)
  clearInterval(c);
},50);  

I have the following code obtained from https://codepen.io/chriscoyier/pen/NWNJpdJ,
How can i change this from hover property to on page load and have the counter stop at 100 without going back to 0.

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

div {
  transition: --num 5s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
}
div::after {
  content: counter(num);
}
div:hover {
  --num: 100;
}

body {
  margin: 2rem;
}

Hover the number.
<div></div>