css анимировать элементы слева направо с паузой между

Question

У меня есть строка из четырех значков, которые я хочу анимировать справа налево, но я хочу, чтобы анимация остановилась в какой-то момент, чтобы каждый значок был виден один за другим в круглая маска. Я просто не могу понять, как сделать паузу в середине ключевого кадра. Я хочу знать, если это возможно, и, если это возможно без каких-либо Javascript Спасибо большое

вот что я сейчас:

@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

Если бы вы могли обеспечить ваш HTML и прояснить немного больше, может быть, легче понять, что именно вы пытаетесь достичь.

Но если вы хотите просто пошатнуть свои значки, вы можете использовать: nth-child псевдоселектор, чтобы поместить уникальную задержку на разные значки, а затем отрегулируйте анимацию%, чтобы сохранить значки для желаемых время.

.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 ошеломляющие анимации с помощью п-го ребенка.