CSS Animation slider - html

Question

I am trying to do an animation slider using only CSS. I have 3 pictures that I want to slide horizontally. My question is that I can add them transformation, but no animation The animation has to stop for a few seconds on each image. Anyone has ideas how to manage it? I use sass.
Code:
.slider {
position: relative;
height: 100vh;
// width: 100vw;
overflow: hidden;
display: block;
.slides {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: flex;
transition-timing-function: ease-out;
animation: slide 3s steps(2) infinite;
.slide {
height: 100vh;
width: 100vw;
padding: 100px;
margin: 0 auto;
float: left;
text-align: center;
img {
margin: 0 auto;
border-radius: 50%;
height: 250px;
}
h1 {
color: #323232;
font-size: 32px;
line-height: 42px;
letter-spacing: 1px;
padding-bottom: 12px;
}
h4 {
font-weight: 200;
line-height: 32px;
letter-spacing: 0.9px;
display: flex;
}
}
//end .slide
&:after {
content: "";
clear: both;
display: block;
}
}
//end .slides
#keyframes slide {
to {
transform: translateX(-300vw);
}
}
}
}
<section class="slider">
<div class="slides">
<div class="slide">
<img src="images/testimonial-img-1.jpg" alt="" />
<h1>TANYA - Architect</h1>
<h4>Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur dolor libero sodales vitae elit massa.</h4>
</div>
<div class="slide">
<img src="images/testimonial-img-2.jpg" alt="" />
<h1>LINDA - City planner</h1>
<h4>Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur dolor libero sodales vitae elit massa.</h4>
</div>
<div class="slide">
<img src="images/testimonial-img-3.jpg" alt="" />
<h1>SANDAR - Developer</h1>
<h4>Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur dolor libero sodales vitae elit massa.</h4>
</div>
</div>
</section>

Answer 1

Try this:-
#outerbox{
width:700px;
overflow:hidden;
}
#sliderbox{
position:relative;
width:2800px;
animation:animation 20s infinite;
}
#sliderbox img{
float:left;
}
#keyframes animation{
0%{
left:0px;
}
100%{
left:-2800px;
}
}
<div id="outerbox">
<div id="sliderbox">
<img src="http://labs.qnimate.com/slider/1.jpg"/>
<img src="http://labs.qnimate.com/slider/2.jpg"/>
<img src="http://labs.qnimate.com/slider/3.jpg"/>
Ok try this
#outerbox{
width:700px;
}
#sliderbox{
position:relative;
width:2800px;
animation:animation 20s infinite;
}
#sliderbox img{
float:left;
}
#keyframes animation{
0%{
left:0px;
}
20%{
left:0px;
}
25%{
left:-700px;
}
45%{
left:-700px;
}
50%{
left:-1400px;
}
70%{
left:-1400px;
}
}
<div id="outerbox">
<div id="sliderbox">
<img src="http://labs.qnimate.com/slider/1.jpg"/>
<img src="http://labs.qnimate.com/slider/2.jpg"/>
<img src="http://labs.qnimate.com/slider/3.jpg"/>
</div>
</div>

Answer 2

Your css, fixed:
.slider{
position: relative;
height: 100vh;
// width: 100vw;
overflow: hidden;
display: block;
}
.slides{
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: flex;
animation: slide 3s ease-out infinite;
}
.slide{
height: 100vh;
width: 100vw;
padding: 100px;
margin: 0 auto;
float: left;
text-align: center;
}
img{
margin: 0 auto;
border-radius: 50%;
height: 250px;
}
h1{
color: #323232;
font-size: 32px;
line-height: 42px;
letter-spacing: 1px;
padding-bottom: 12px;
}
h4{
font-weight: 200;
line-height: 32px;
letter-spacing: 0.9px;
display: flex;
}
&:after{
content: "";
clear: both;
display: block;
}
The closing } were wrong. you can't have a css rule inside another.
Also the transition timing wasn't doing anything if you are using animation, you can add it to the animation declaration. Transition and animation are two different things. Both have timing function which you can declare on a single line or separately.