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