Анимация элемента без анимации псевдоэлементов

Question

У меня есть div и оба :: before и :: после псевдоэлементов этого div. Я хочу анимировать каждый из них с различными задержками (0, 0.5s и 1.0).

Я пытался разными способами, пока я не понял, что я мог двигаться как псевдо-элементы с задержкой Я хотел, но не сам, или я мог переместить ДИВ только ДИВ и псевдо-элементы будет двигаться в том же времени.

Во втором случае, если я попытаюсь анимировать псевдоэлементы отдельно, они выполняют анимацию дважды.

Первый пример:

.wave { 
    background-color: blue; 
    border-radius: 50%; 
    height: 26px; 
    margin: auto; 
    position: relative; 
    width: 26px; 
} 

.wave:before, .wave:after { 
    animation: bounce 1s linear infinite alternate; 
    border-radius: inherit; 
    content: ' '; 
    height: inherit; 
    margin: inherit; 
    position: absolute; 
    width: inherit; 
} 

.wave:before { 
    background-color: red; 
    right: 30px; 
} 

.wave:after { 
    background-color: green; 
    animation-delay: 1s; 
    left: 30px; 
} 

Seconde пример:

.wave { 
    animation: bounce 1s linear infinite alternate; 
    background-color: blue; 
    border-radius: 50%; 
    height: 26px; 
    margin: auto; 
    position: relative; 
    width: 26px; 
} 

.wave:before, .wave:after { 
    border-radius: inherit; 
    content: ' '; 
    height: inherit; 
    margin: inherit; 
    position: absolute; 
    width: inherit; 
} 

.wave:before { 
    background-color: red; 
right: 30px; 
} 

.wave:after { 
    background-color: green; 
    animation-delay: 1.2s; 
    left: 30px; 
} 

Сказав, что все, что я хочу знать:

Можно ли переместить все они, используя только один div, с разным временем? Как так?

EDIT 1

Вот codepen, выделяя этот случай: https://codepen.io/haaswill/pen/vyroJG

Answer 1

Вы должны быть в состоянии просто поставить свойство анимации на: до и: после

Я вертел с этим heh - я смог получить 3 части, чтобы оживить самостоятельно. Проверьте это здесь: https://jsfiddle.net/karolbrennan/706gkbna/2/

@keyframes bounce { 
    0% {left: 0px; } 
    25% {left: 25px; } 
    50% {left: 50px; } 
    75% {left: 25px; } 
    100% {left: 0px; } 
} 

.wave { 
    animation: bounce 3.5s linear infinite alternate; 
    background-color: blue; 
    border-radius: 50%; 
    height: 26px; 
    margin: 100px auto; 
    position: relative; 
    width: 26px; 
} 

.wave:before, .wave:after { 
    background-color: inherit; 
    border-radius: inherit; 
    content: ' '; 
    height: inherit; 
    width: inherit; 
    position: absolute; 
} 

.wave:before { 
    animation: bounce 1.5s linear infinite alternate; 
    animation-delay: 0.25s; 
    right: 30px; 
} 

.wave:after { 
    animation: bounce 2s linear infinite alternate; 
    animation-delay: 0.5s; 
    left: 30px; 
} 

Там в статье об этом здесь: https://cssanimation.rocks/pseudo-elements/