Transição automática de imagens no slider com css

Bom dia pessoal, sou novo no Imasters e na parte de desenvolvimento em geral e estou com uma dúvida bem simples, não julguem kkk

Criei esse slider descrito logo abaixo e não consigo fazer a troca de imagens automática.

Por exemplo, a cada 3 segundos a imagem fazer um fade out e entrar outra com fade in básico, ou mesmo deslizar pro lado. A animação não tem tanta importancia.

O que queria mesmo era fazer com que funcione o código pra automatizar a troca de imagens.

Alguem poderia por favor me dar uma luz? Tentei algumas coisas aqui mas não consegui :/

Segue o slider:

<div class="div-slider">
 <ul class="slides-front">
 <input type="radio" name="radio-btn" id="img-1" checked="">
 <li class="slide-container">
 <div class="slide">
 <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-1.png">
 </div>
 <div class="nav">
 <label for="img-3" class="prev">‹</label>
 <label for="img-2" class="next">›</label>
 </div>
 </li>

 <input type="radio" name="radio-btn" id="img-2">
 <li class="slide-container">
 <div class="slide">
 <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-2.png">
 </div>
 <div class="nav">
 <label for="img-1" class="prev">‹</label>
 <label for="img-3" class="next">›</label>
 </div>
 </li>

 <input type="radio" name="radio-btn" id="img-3">
 <li class="slide-container">
 <div class="slide">
 <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-3.png">
 </div>
 <div class="nav">
 <label for="img-2" class="prev">‹</label>
 <label for="img-1" class="next">›</label>
 </div>
 </li>

 <li class="nav-dots">
 <label for="img-1" class="nav-dot" id="img-dot-1"></label>
 <label for="img-2" class="nav-dot" id="img-dot-2"></label>
 <label for="img-3" class="nav-dot" id="img-dot-3"></label>
 </li>
 </ul>
</div>

	E o CSS do mesmo:

/------------------- SLIDER FRONT PAGE - NOVIDADES ----------------------/

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

.div-slider{
width: auto;
height: 400px;
text-align: center;
}
.slides-front {
 padding: 0;
 width: 980px;
 height: 370px;
 display: block;
 margin: auto;
 position: relative;
}

.slides-front * {

 user-select: none;
 -ms-user-select: none;
 -moz-user-select: none;
 -khtml-user-select: none;
 -webkit-user-select: none;
 -webkit-touch-callout: none;
}

.slides-front input { display: none; }

.slide-container { display: block; }

.slide {
 top: 0;
 opacity: 0;
 width: 980px;
 height: 370px;
 display: block;
 position: absolute;

 transform: scale(0);

 transition: all .7s ease-in-out 0.1s;
}

.slide img {

 width: 100%;
 height: 100%;
}

.nav label {

 width: 150px;
 height: 100%;
 display: none;
 position: absolute;
 opacity: 0;
 z-index: 9;
 cursor: pointer;
 transition: opacity .2s;
 color: #FFF;
 font-size: 156pt;
 text-align: center;
 line-height: 380px;
 font-family: "Varela Round", sans-serif;
 background-color: rgba(255, 255, 255, .3);
 text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container .slide {

 opacity: 1;

 transform: scale(1);

 transition: opacity 1s ease-in-out 0.1s;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: relative;
	text-align: center;
}

.nav-dots .nav-dot {

	top: 375px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {

	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3, {

	background: rgba(0, 0, 0, 0.8);
}

	 

	Acho que é isso (:

	Qualquer ajuda é bem vinda. Valeeeeu