<div></div>
@property --num {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
div::before {
counter-reset: my-counter var(--num);
content: counter(my-counter);
animation: count 10s ease-in-out infinite alternate;
}
@keyframes count {
to { --num: 100; }
}
/* everything below is for demo appearances and not important to the concept */
body {
box-sizing: border-box;
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
color: #556270;
background-image: linear-gradient(-45deg, #c5e0dc, #dcedc2);
font: 700 6rem/1 'Signika', sans-serif;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.