Мигающие элементы на css поочередно?

Question

[alalala]

Как заставить поочередно мигать с черного к красному
играюсь с @-webkit-keyframes ничего не получается
в результате хочу получить следующее
что бы сначала 1й элемент засветился красным, потом назад в черный
потом второй, и так далее
Это реально сделать?

Answer 1

[0xD34F]

Задавайте элементам, в зависимости от их положения, различную задержку анимации:

.el {
  animation: blink 2s linear infinite;
  background: #000;
}

.el:nth-child(1) { animation-delay: 0s; }
.el:nth-child(2) { animation-delay: 0.5s; }
.el:nth-child(3) { animation-delay: 1s; }
.el:nth-child(4) { animation-delay: 1.5s; }

@keyframes blink {
  0%, 20% {
    background: #000;
  }
  10% {
    background: #F00;
  }
}

https://jsfiddle.net/zcy6v7w5/

Comments

[alalala]

Спасибо большое

Answer 2

[Тарас Шульга]

Ну так с лету есть два варианта. Первый сделать как ювилир рассчитать все до мс и написать анимашку, второй вариант, взять js - взять событие транзишенЕнд - вроде так (оно отлавливает когда анимация закончилась) и поочередно вешать его на элементы, я уверен, что есть ещё вагон вариантов , но это первое, что стукнуло в голову.