Как чередовать элементы без анимации?

Question

[hackuun]

Не соображу как последовательно показывать по очереди 3 элемента с промежутком. ВОт к примеру это делает с анимацией opacity

#e1, #e2, #e3
  position: absolute
  top: 0
  left: 0
  animation: change 750ms infinite materialEaseInOut

#e2
  animation-delay: -250ms

#e3
  animation-delay: -500ms

@keyframes change {
  0%, 100% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
}

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

Comments

[lamer350]

Без анимации с помощью css никак, все что вам предложили ниже - просто анимация с моментальной скоростью по сути! Вам достаточно 750ms изменить на 10ms, эффект будет тот же.
Следующее решение только с JS и функцией setTimeout

[hackuun]

lamer350,

Вам достаточно 750ms изменить на 10ms, эффект будет тот же.

Тогда элементы чередуются со скоростью 10 миллисекунд. Вы думаете мне нужно чередовать элементы со скоростью 10 миллисекунд?

[lamer350]

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

[hackuun]

lamer350, одним словом - ламер

[lamer350]

hackuun, аха, точно подметил. Успехов)

[hackuun]

lamer350, я готов тебе заплатить 50 баксов если ты сделаешь нужный мне результат изменив 750ms на 10ms! Ну так что, знаток, ЦСС свойсв, готов?

Answer 1

[0xD34F]

<div id="e1">1</div>
<div id="e2">22</div>
<div id="e3">333</div>
<div id="e4">4444</div>
<div id="e5">55555</div>

#e1, #e2, #e3, #e4, #e5 {
  position: absolute;
  top: 0;
  left: 0;
  animation: change 1250ms infinite steps(1);
}
#e2 { animation-delay: -1000ms; }
#e3 { animation-delay: -750ms; }
#e4 { animation-delay: -500ms; }
#e5 { animation-delay: -250ms; }

@keyframes change {
  0%, 20% {
    opacity: 1;
  }
  20%, 100% {
    opacity: 0;
  }
}

Comments

[hackuun]

Отлично, спасибо! Про steps я забыл, это то что надо.