add timing function to css slider - html

Question

Have been trying to get my head around this for days but need some assistance from you css gurus!
I have a pure css slider that uses some controls which is great. The issue is that I want the slider to also move automatically like a timings function. I was trying to do it using keyframes but had no luck.
How would this be possible?
HTML:
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">
<div class="sliderPagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>
<div class="next control">
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-right"></i></label>
</div>
<div class="previous control">
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-left"></i></label>
</div>
<div class="slider slide1">
</div>
<div class="slider slide2">
</div>
<div class="slider slide3">
</div>
<div class="slider slide4">
</div>
</div>
CSS :
/* SLIDER WRAPPER */
.wrapper {
position: relative;
display: block;
overflow: hidden;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.mainSlider.wrapper {
border-bottom: solid 6px #cc2027;
height: 900px;
height: 100vh;
}
/* SLIDER */
.slider {
width: 100%;
height: 100%;
background: #f2f2f2;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: row;
flex-wrap: wrap;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
.slider > * {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
/* CONTROLS */
.control {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
z-index: 55;
}
.control label {
z-index: 0;
display: none;
text-align: center;
line-height: 50px;
font-size: 50px;
color: #FFF;
cursor: pointer;
opacity: 0.2;
}
.control label:hover {
opacity: 0.5;
}
.next {
right: 1%;
}
.previous {
left: 1%;
}
.sliderPagination {
position: absolute;
bottom: 40px;
width: 100%;
right: 60px;
text-align: right;
z-index: 50;
}
.sliderPagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: #959595;
margin: 0 2px;
border: solid 1px rgba(255,255,255,0.4);
cursor: pointer;
}
.slide-radio1:checked ~ .next .numb2,
.slide-radio2:checked ~ .next .numb3,
.slide-radio3:checked ~ .next .numb4,
.slide-radio2:checked ~ .previous .numb1,
.slide-radio3:checked ~ .previous .numb2,
.slide-radio4:checked ~ .previous .numb3 {
display: block;
z-index: 1
}
/* ACTIVE */
.slide-radio1:checked ~ .sliderPagination .page1,
.slide-radio2:checked ~ .sliderPagination .page2,
.slide-radio3:checked ~ .sliderPagination .page3,
.slide-radio4:checked ~ .sliderPagination .page4 {
background: #cc2027;
}
/* SLIDER ANIMATION */
.slide-radio1:checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.slide-radio1:checked ~ .slide1 h1,
.slide-radio2:checked ~ .slide2 h1,
.slide-radio3:checked ~ .slide3 h1,
.slide-radio4:checked ~ .slide4 h1,
.slide-radio1:checked ~ .slide1 p,
.slide-radio2:checked ~ .slide2 p,
.slide-radio3:checked ~ .slide3 p,
.slide-radio4:checked ~ .slide4 p,
.slide-radio1:checked ~ .slide1 .button,
.slide-radio2:checked ~ .slide2 .button,
.slide-radio3:checked ~ .slide3 .button,
.slide-radio4:checked ~ .slide4 .button {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}