Как сделать три div коробки в цикле анимации непрерывно
Я пытаюсь сделать три дива(один над другим), каждый из которых содержит различную информацию.
Затем, используя анимацию, я хочу отобразить информацию о каждом div в течение короткого промежутка времени (вероятно, 5 секунд).
Но в моем коде анимация запускается только один раз и застревает на последнем div(синий цвет).
Как зациклить анимацию непрерывно
Что я уже пробовал:
<!DOCTYPE html>
<title>animation
@keyframes ani1{
from{opacity:1;}
to{opacity:1;}
}
@keyframes ani2{
from{opacity:1;}
to{opacity:1;}
}
@keyframes ani3{
from{opacity:1;}
to{opacity:1;}
}
#mis{
position:absolute;
width:200px;
height:200px;
opacity:0;
animation:ani1 5s linear 0s infinite;
background-color:red;
}
#vis{
position:absolute;
width:200px;
height:200px;
opacity:0;
animation:ani2 5s linear 5s infinite;
background-color:green;
}
#alum{
position:absolute;
width:200px;
height:200px;
opacity:0;
animation:ani3 5s linear 10s infinite;
background-color:blue;
}
<div id="mis">red</div>
<div id="vis">green</div>
<div id="alum">blue</div>