foreach循环动画延迟+1秒

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 .= '}'; 
}