foreach循环动画延迟+ 1S

Question

下面的代码

@keyframes example { 
    100% {background-color: grey;} 
} 
<?php 
$code = 1432; 
$arr1 = str_split($code); 
$css = ''; 
foreach ($arr1 as $value) { 
    $css .= '#btn' . $value . ' {'; 
    $css .= 'animation-name:example;'; 
    $css .= 'animation-duration:1s;'; 
    $css .= 'animation-delay:0.5s;'; 
    $css .= '}'; 
} 

echo $css; // output variable 
?> 

创建这样的输出：

#btn1 {animation-name:example;animation-duration:1s;animation-delay:0.5s;} 
#btn4 {animation-name:example;animation-duration:1s;animation-delay:0.5s;} 
#btn3 {animation-name:example;animation-duration:1s;animation-delay:0.5s;} 
#btn2 {animation-name:example;animation-duration:1s;animation-delay:0.5s;} 

我的问题是，这四个动画开始在同一时间。我应该在我的foreach循环中添加什么，每个动画延迟1秒。在这个例子中，#btn1在一秒后变成动画#btn4等等？我知道我需要改变动画延迟每次加1秒，但我不知道如何。 ：/

Answer 1

foreach ($arr1 as $index => $value) { 
    $css .= '#btn' . $value . ' {'; 
    $css .= 'animation-name:example;'; 
    $css .= 'animation-duration:1s;'; 
    $css .= 'animation-delay:' . $index . 's;'; 
    $css .= '}'; 
}