Translate div with animation in css or js

I have a cursor with css of 3 images and text that is automatically passed with an animation

I've created text buttons that by clicking, left: -100px but that does not work, it's my code

function sliderAtras () {
var atras = document.getElementById ("btnAtras");
atras.style.left = "-100px";
}
.slideshow {
width: 300%;
position: relative;
animation: slide_animation 15s infinite ease;
}

.slide-2 {
position: relative;
float: left;
width: 33.33%;
overflow: hidden;
}

.slideshow img {
width: 100%;
}
#btnAtras, #btnAdelante {
position: absolute;
z-index: 999;
cursor: pointer;
}
#btnAdelante {
left: 500;
}
@ -webkit-keyframes slide_animation {

0% {left: 0%;}
28% {left: 0%}
33% {left: -100%;}
61% {left: -100%;}
66% {left: -200%;}
94% {left: -200%;}
100% {rest: 0%;}
}
BEHIND
BEFORE

title

Text

see more

title

Text

see more

title

Text

see more