body {
counter-reset: contador 100;
animation: contar 30s forwards alternate infinite;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
&::after {
content: counter(contador);
font-size: 16em;
}
}
@keyframes contar {
@for $i from 100 through 1 {
#{$i}% {
counter-increment: contador #{-$i};
background: hsl($i * 3.6,100,40);
color: #fff;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.