执行休息;在SCSS中

我有一些代码.

帕格:

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)}';
      }
    }
  } 
}

问题是计数器计数从100何时到达50,计数器将停止 - 100% {content: 'Stop'; }动画将结束(现在它继续49% {content: '51';} 100% {content: 'Stop';} 51% {content: '49';}).

问题:break;在js中是否存在像scss这样的东西？

codepen

PS: @break;不能按预期工作.

PPS:俄语同样的问题.