Почему мои анимации CSS не запускаются одновременно?

Question

Я работаю над доказательством концепции. Я пытаюсь дублировать Tinder UX, используя HTML и CSS, вот моя ссылка: CodePen

Проблема в том, что у меня есть две основные анимации, которые должны работать параллельно друг другу. Но они работают последовательно, один за другим. Есть ли способ запускать их одновременно?

анимация на фото профиля.

 
    .tinder-profile 
    { 
     -webkit-animation: avatar 0.8s; 
       animation: avatar 0.8s; 
    } 

    @keyframes avatar { 
     0% { 
     -webkit-transform: scale(0.8, 0.8); 
       transform: scale(0.8, 0.8); 
     } 
     60% { 
     -webkit-transform: scale(1.1, 1.1); 
      transform: scale(1.1, 1.1); 

     } 
     100% { 
     -webkit-transform: scale(1, 1); 
       transform: scale(1, 1); 

     } 
    } 

и пульсирующие круги в фоновом режиме:

<pre> 
.tinder-ping1{ 
    -webkit-animation: ping 3s ease-in-out infinite; 
      animation: ping 3s ease-in-out infinite; 
    z-index:9; 
} 
@keyframes ping { 
    0% { 
    -webkit-transform: scale(0, 0); 
      transform: scale(0, 0); 
    opacity: 0.0; 
    } 
    40% { 
    opacity: 1.0; 
    } 
    100% { 
    -webkit-transform: scale(1.1, 1.1); 
     transform: scale(1.1, 1.1); 
    opacity: 0.0; 
    } 
} 
</pre> 

Вот ссылка на EditPen, где вы можете увидеть весь код: CodePen

Answer 1

Он должен сделать с начальным положением ваших tinder-ping элементов. Все они начинаются полноразмерными и, таким образом, анимация не работает, пока третий, наконец, не изменится, чтобы быть маленьким. Вы должны будете играть с реальными параметрами, но установка пинги 1, 2 и 3, чтобы иметь

-webkit-transform: scale(0, 0); 
     transform: scale(0, 0); 
opacity: 0; 

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

По сути, ваш третий пинг скрывает два других, поскольку он равен 520x520 пикселей до момента задержки анимации.