CSSのアニメーションシーケンス

Question

私は非常に単純な "トラフィックライト"プログラムをコーディングしていて、最初の@keyframesセクションが正しく完了した後に実行されない問題に遭遇しました。私自身の研究オンラインからは、最初に@keyframesが完了したときに次のものが実行されるように、移行（？）が必要であると推測しています。しかし、私の経験がない私は、ここに必要なものがあれば分かりません。基本的に私が行方不明になっている "トリガー"がありますか？

大まかなコードはご容赦ください。私は

前述したように、その作業を行い

body { 
 
    background-color: #4d4d00 
 
} 
 

 
.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#red { 
 
    position: absolute; 
 
    left: 50px; 
 
    text-align: center; 
 
    padding: 30px; 
 
    background-color: #e60000; 
 
    margin: 10px auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 200px; 
 
    animation: red 4s 1s 3 linear; 
 
} 
 

 
#amber { 
 
    position: absolute; 
 
    left: 1px; 
 
    text-align: center; 
 
    padding: 30px; 
 
    background-color: #ff3300; 
 
    margin: 10px auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 200px; 
 
    animation: amber 4s 1s 3 linear; 
 
} 
 

 
#green { 
 
    position: absolute; 
 
    left: 1px; 
 
    text-align: center; 
 
    padding: 30px; 
 
    background-color: #009933; 
 
    margin: 10px auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 200px; 
 
    animation: green 4s 1s 3 linear; 
 
} 
 

 
@keyframes red { 
 
    from { 
 
    background-color: #e60000; 
 
    } 
 
    to { 
 
    background-color: #000000; 
 
    } 
 
    @keyframes amber { 
 
    from { 
 
     background-color: #ff3300; 
 
    } 
 
    to { 
 
     background-color: #000000; 
 
    } 
 
    @keyframes green { 
 
     from { 
 
     background-color: #009933; 
 
     } 
 
     to { 
 
     background-color: #000000; 
 
     } 
 
    }

<div class="container"> 
 
    <div class="row"> 
 
    <div id="red"> 
 
     <br> 
 
     <br> 
 
     <div id="amber"> 
 
     <br> 
 
     <br> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたがアニメーション化したい要素に高い遅延をこの

1）され、使用アニメーション遅延を行うと、設定するには2つの方法を持っています後に。

animation-delay: 1s; 
-webkit-animation-delay:1s; 

2）トリガーan element.addClass（ "animatedClass"）; CSSアニメーションの末尾にanimationonend jquery関数を使用します。

$(".animatedElement").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) { 
     $(".animatedElement").addClass("newAnimatedClass"); 
}); 

Answer 2

アニメーション遅延を使用することができます。

ここには短い/最小のコード例があります。ここ

.red { 
 
    background: red; 
 
} 
 

 
.orange { 
 
    background: orange 
 
} 
 

 
.green { 
 
    background: lime; 
 
} 
 

 

 
/* layout */ 
 

 
div { 
 
    display: flex; 
 
    height: 150px; 
 
    width: 50px; 
 
    flex-direction: column; 
 
    border-radius: 1em; 
 
    background: #555; 
 
    margin: 1em; 
 
} 
 

 
b { 
 
    flex: 1; 
 
    margin: 5px; 
 
    border-radius: 50%; 
 
    animation: fade 9s steps(2, end) infinite; 
 
    box-shadow: 0 0 5px white 
 
} 
 

 
/* animation */ 
 
@keyframes fade { 
 
    66%, 
 
    100% { 
 
    background: gray; 
 
    box-shadow: 0 0 
 
    } 
 
} 
 

 
.red { 
 
    animation-delay: -12s 
 
} 
 

 
.orange { 
 
    animation-delay: -6s; 
 
}

<div class=trafficLights> 
 
    <b class=red></b> 
 
    <b class=orange></b> 
 
    <b class=green></b> 
 
</div>

と遊ぶcodepenです：https://codepen.io/gc-nomade/pen/YVWeQq