Есть одна css3 анимация, как заставить 2 разных жлемента стартовать в разное время?

Question

[Капитан Какао]

В общем есть одна анимация простая

@keyframes balls {
  from{transform: scale(1,1);}
  50%{transform: scale(2.030,2.030)}
  to{transform: scale(1,1)}
}

И есть 2 div блока, если повесить на оба анимацию, она сработает на обоих одновременно.
А мне нужно что бы сначала эффект был на одном блоке, потом на другом. Как это реализовать подскажите пожалуйста.
Желательно конечно так, что бы не создавать для каждого отдельную анимацию. А воспользоваться задержкой.

Пример кода: https://jsfiddle.net/jpqqyn7b/1/

Answer 1

[GreatRash]

Прочитайте уже документацию, и все вопросы отпадут.

Comments

[Капитан Какао]

Спасибо)

Если вдруг кому пригодиться, вот решение: https://jsfiddle.net/jpqqyn7b/3/

Answer 2

[Николай]

animation-delay
https://jsfiddle.net/jpqqyn7b/2/