I have some code.
Pug:
div(data-counter="100")
SCSS:
$start: 100;
$end: 20;
div:before {
content: attr(data-counter);
animation: countdown 10s steps(1, start) forwards;
}
@keyframes countdown {
@for $i from 1 through $start {
@if $i == 50 {
100% {
content: 'Stop';
}
} @else {
#{$i}% {
content: '#{($start - $i)}';
}
}
}
}
The problem is that the counter counts from 100
and when it reaches 50
, the counter would stop - 100% {content: 'Stop'; }
And the animation would end (now it continues 49% {content: '51';} 100% {content: 'Stop';} 51% {content: '49';}
).
Question: Is there something like break;
for scss like in js?
P.S: @break;
does not work as desired.