SOURCE

<section>
    <div class="w">
	<ul>
		<li class="ww w1">1</li>
		<li class="ww w2">2</li>
		<li class="ww w3">3</li>
		<li class="ww w4">4</li>
		<li class="ww w5">5</li>
	</ul>
</div>
<div class="n">
	<ul>
		<li class="nn n1"><div></div></li>
		<li class="nn n2"><div></div></li>
		<li class="nn n3"><div></div></li>
		<li class="nn n4"><div></div></li>
		<li class="nn n5"><div></div></li>
	</ul>
</div>
</section>

*{
    padding: 0;margin: 0;list-style: none;
}

section{
    width: 100%;
    height: 100%;
    position: relative;
}

.w,.w li{
    width: 100%;
    padding-bottom: 60%;
    text-align: center;
}

.w li{
    position: absolute;
    animation:fade 10s linear infinite;
}

.w li:nth-child(1){
    background: red;
    animation-delay: 0s;
}

.w li:nth-child(2){
    background: yellow;
    animation-delay: 2s;

}

.w li:nth-child(3){
    background: blue;
    animation-delay: 4s;
}

.w li:nth-child(4){
    background: green;
    animation-delay: 6s;
}

.w li:nth-child(5){
    background: purple;
    animation-delay: 8s;
}



.w li~li{
    opacity: 0;
}



@keyframes fade{
    0%{ opacity: 0;z-index: 2;}
    5%{opacity: 1;z-index: 1;}
    20%{opacity: 1;z-index: 1;}
    25%{opacity: 0;z-index: 0;}
    100%{opacity: 0;z-index: 0;}
}

.n ul{
    position: absolute;
    margin-left: 45%;
    bottom: -3%;
}

.n li{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    z-index: 10;
    float: left;
    margin-right: 10px;
    animation:fade 10s linear infinite;

}

.n li div{
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: black;
}

.n n1{
     animation-delay: 0s;
}