Как сделать чтобы после последнего элемента снова появлялся первый за ним второ и т.д. https://jsfiddle.net/3cthur08/
*{
box-sizing:border-box;
}
@keyframes c1 {
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
div{
position:relative;
width:500px;
height: 236px;
border: 1px black solid;
}
p{
position: absolute;
width:100%;
height:100%;
}
.q1{
animation: c1 3s 12s;
animation-fill-mode: forwards;
background:red;
}
.q2{
animation: c1 3s 9s;
animation-fill-mode: forwards;
background:blue;
}
.q3{
animation: c1 3s 6s;
animation-fill-mode: forwards;
background:green;
}
.q4{
animation: c1 3s 3s;
animation-fill-mode: forwards;
background:black;
}
.q5{
animation: c1 3s;
animation-fill-mode: forwards;
background:gray;
}
<div class="container">
<p class="q1"></p>
<p class="q2"></p>
<p class="q3"></p>
<p class="q4"></p>
<p class="q5"></p>
</div>