.counter
View Compiled
@property --milliseconds {
inherits: false;
initial-value: 0;
syntax: '<integer>';
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: hsl(10, 10%, 10%);
}
.counter {
position: relative;
counter-reset: ms var(--milliseconds);
animation: count 1s steps(100) infinite;
}
.counter:after {
content: counter(ms);
position: absolute;
top: 0;
left: 0;
font-size: 5rem;
transform: translate(-50%, 0);
color: hsl(0, 0%, 100%);
font-weight: bold;
font-family: sans-serif;
}
@keyframes count {
to {
--milliseconds: 100;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.