JSFiddle - React, Tailwind, and code Playground

HTML

<div class="caixa">
	<div id="caixa-slider">
		<div id="slider">
			<div id="mascara">
            <ul>
            <li id="primeiro" class="primeira-anima">
            <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img1.jpg" alt="Lago"/></a>
           </li>
            <li id="segundo" class="segunda-anima">
            <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img2.jpg" alt="Neve"/></a>
            </li>
            <li id="terceiro" class="terceira-anima">
            <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img3.jpg" alt="Lagoa"/></a>
           </li>
              <li id="quarto" class="quarta-anima">
            <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img4.jpg" alt="Campo"/></a>
           </li>
             <li id="quinto" class="http://blog.2bdesign.net/tutoriais/autoslideshow/quinta-anima">
            <a href="#"><img src="imagens/img5.jpg" alt="Árvore"/></a>
           </li>
            </ul>
			</div>
           <div class="barra-progresso"></div>
		</div>
	</div>
</div>

CSS

@charset “utf-8″;
 
#slider{
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 320px;
    width: 680px;
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
 
}
 
#mascara {
    overflow: hidden;
    height: 320px;
}
 
#slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}
 
#slider li {
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}
#slider li.primeira-anima {
    animation: cycle 25s linear infinite;
    -moz-animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite;
    -ms-animation: cycle 25s linear infinite;
    -o-animation: cycle 25s linear infinite;
}
 
#slider li.segunda-anima {
    animation: cycletwo 25s linear infinite;
    -moz-animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;
    -ms-animation: cycletwo 25s linear infinite;
    -o-animation: cycletwo 25s linear infinite;
}
 
#slider li.terceira-anima {
    animation: cyclethree 25s linear infinite;
    -moz-animation: cyclethree 25s linear infinite;
    -webkit-animation: cyclethree 25s linear infinite;
    -ms-animation: cyclethree 25s linear infinite;
    -o-animation: cyclethree 25s linear infinite;
}
 
#slider li.quarta-anima {
    animation: cyclefour 25s linear infinite;
    -moz-animation: cyclefour 25s linear infinite;
    -webkit-animation: cyclefour 25s linear infinite;
    -ms-animation: cyclefour 25s linear infinite;
    -o-animation: cyclefour 25s linear infinite;
}
 
#slider li.quinta-anima {
    animation: cyclefive 25s linear infinite;
    -moz-animation: cyclefive 25s linear infinite;
    -webkit-animation: cyclefive 25s linear infinite;
    -ms-animation: cyclefive 25s linear infinite;
    -o-animation: cyclefive 25s linear infinite;
}
@keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px;...