css左から右にポーズを入れて要素をアニメーション

Question

私は右から左にアニメーション化したい4つのアイコンの行を持っていますが、アニメーションをある時点で一時停止して各アイコンを次々と表示するようにしたい丸いマスク。 私はちょうどキーフレームの途中で一時停止する方法を理解できません。

@keyframes move { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(200%); 
    -moz-transform: translateX(200%); 
    -ms-transform: translateX(200%); 
    -o-transform: translateX(200%); 
    transform: translateX(200%); 
    } 
    25% { 
    opacity: 1; 
    } 
    50% { 
    -webkit-transform: translateX(0%); 
    -moz-transform: translateX(0%); 
    -ms-transform: translateX(0%); 
    -o-transform: translateX(0%); 
    transform: translateX(0%); 
    } 
    75% { 
    -webkit-transform: translateX(0%); 
    -moz-transform: translateX(0%); 
    -ms-transform: translateX(0%); 
    -o-transform: translateX(0%); 
    transform: translateX(0%); 
    } 
.icons { 
    -webkit-animation: move 4s ease-in 2; 
    -moz-animation: move 4s ease-in 2; 
    animation: move 4s ease-in 2; 
} 
    100% { 
    -webkit-transform: translateX(-200%); 
    -moz-transform: translateX(-200%); 
    -ms-transform: translateX(-200%); 
    -o-transform: translateX(-200%); 
    transform: translateX(-200%); 
    } 
} 

あなたが提供することができれば、あなたの助け

Answer 1

を事前に感謝を：私はそれが可能だと、それはここで任意のJavascriptをせずに どうもありがとう

可能だ場合、私は今持っているものであるかどうかを知りたいですHTMLを理解し、もう少し明確にすることで、達成しようとしていることを正確に理解するのが簡単になるでしょう。

あなたのアイコンをずらすことを考えているなら、nth-child擬似セレクタを使って異なるアイコンに一意の遅延をつけてから、あなたのアニメーションを調整して、あなたの望む時間。 n番目の子を使用してアニメーションをずらすの

.icons:nth-child(2) { 
    animation-delay: 1s; 
} 
.icons:nth-child(3) { 
    animation-delay: 2s; 
} 
.icons:last-child { 
    animation-delay: 3s; 
} 

---

Here is a working example。