#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
}
}
<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;
}
}
Простой
Средний
Простой
Простой
