JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="car-ctn">
    <div class="car">
        <div class="slide-1"></div>
        <div class="slide-2"></div>
        <div class="slide-3"></div>
        <div class="slide-4"></div>
        <div class="slide-5"></div>
    </div>
</div>

CSS

.car-ctn{
    display:block;
    width:600px;
    height:200px;
    position:relative;
    overflow:hidden;
}
.car{
    display:block;
    width:inherit;
    height:inherit;
    position:absolute;
    top:0;
    animation:carousel 30s infinite;
    -webkit-animation:carousel 30s infinite;
}
.car>div{
    display:block;
    width:inherit;
    height:inherit;
    position:absolute;
    top:0;
}
.slide-1{
    left:0;
    background:blue;
}
.slide-2{
    left:100%;
    background:yellow; 
}
.slide-3{
    left:200%; 
    background:green;
}
.slide-4{
    left:300%; 
    background:purple;
}
.slide-5{
    left:400%; 
    background:red;
}

@keyframes carousel{
     0%    { left:0; }
    19.5%   { left:0; }
    21.5%   { left:-100%;}
    39.5%   { left:-100%;}
    41.5%   { left:-200%;}
    59.5%   { left:-200%;}
    61.5%   { left:-300%;}
    79.5%   { left:-300%;}
    81.5%   { left:-400%;}
    99.5%   { left:-400%;}
    100%  { left:0; }
}
@-webkit-keyframes carousel{
     0%    { left:0; }
    19.5%   { left:0; }
    21.5%   { left:-100%;}
    39.5%   { left:-100%;}
    41.5%   { left:-200%;}
    59.5%   { left:-200%;}
    61.5%   { left:-300%;}
    79.5%   { left:-300%;}
    81.5%   { left:-400%;}
    99.5%   { left:-400%;}
    100%  { left:0; }
}