执行休息;在SCSS

Question

我有一些代码。

帕格：

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';}）。

问题：是否有类似于js的类似break;？

codepen

P.S：@break;根据需要不起作用。

PPS：Same question in Russian.

Answer 1

根据张贴在你可以使用SCSS创建数字

演示俄罗斯问题的答案：https://codepen.io/jakob-e/pen/mwYKpV

SCSS：

@function countdown-numbers($from: 100, $through: 0){ 
    $str: ''; 
    @for $i from $from through $through { $str: $str + '#{$i}\A'; } 
    @return $str; 
} 


div { 
    line-height: 1.2; 
    height: 1.2em; 
    overflow: hidden; 
    &::after { 
     display: inline-block; 
     white-space: pre-wrap; 
     // creates 50 numbers 100\A 99\A ... 51\A 
     // and add STOP to the string 
     content: countdown-numbers(100, 51) + STOP; 
     // run animation in 50 steps (don't count start) 
     animation: countdown 10s steps(50) forwards;  
    } 
} 
@keyframes countdown { 
    to { transform: translateY(calc(1.2em - 100%)) } 
} 

CSS输出（使用Autoprefixer）：

div { 
    line-height: 1.2; 
    height: 1.2em; 
    overflow: hidden; 
} 
div::after { 
    display: inline-block; 
    white-space: pre-wrap; 
    content: "100\a 99\a 98\a 97\a 96\a 95\a 94\a 93\a 92\a 91\a 90\a 89\a 88\a 87\a 86\a 85\a 84\a 83\a 82\a 81\a 80\a 79\a 78\a 77\a 76\a 75\a 74\a 73\a 72\a 71\a 70\a 69\a 68\a 67\a 66\a 65\a 64\a 63\a 62\a 61\a 60\a 59\a 58\a 57\a 56\a 55\a 54\a 53\a 52\a 51\aSTOP"; 
-webkit-animation: countdown 5s steps(50) forwards; 
     animation: countdown 5s steps(50) forwards; 
} 

@-webkit-keyframes countdown { 
    to { 
    -webkit-transform: translateY(calc(1.2em - 100%)); 
      transform: translateY(calc(1.2em - 100%)); 
    } 
} 

@keyframes countdown { 
    to { 
    -webkit-transform: translateY(calc(1.2em - 100%)); 
      transform: translateY(calc(1.2em - 100%)); 
    } 
}