JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="carousel">
  <div class="items">
      <img class="item" src="http://farm8.staticflickr.com/7163/6767596393_8f8b9609ec_d.jpg">
      <img class="item" src="http://farm8.staticflickr.com/7004/6767593255_ae68f10fac_d.jpg">
   </div>
</div>

CSS

div.carousel{
    display:block;
    height:500px;
    width:333px;
    position:relative;
    overflow:hidden;
}
.carousel img{
    position:absolute;
    top:0;
    left:0;
}
.carousel img:nth-of-type(2){
    left:100%;
    animation:firstframe 5s infinite;
    -webkit-animation:firstframe 5s infinite;
}
.carousel img:nth-of-type(1){
    left:0;
    animation:secondframe 5s infinite;
    -webkit-animation:secondframe 5s infinite;
}

@keyframes firstframe{
    25%   {left:100%}
    60% {left:0%}
}
@-webkit-keyframes firstframe{
    25%   {left:100%}
    60% {left:0%}
}
@keyframes secondframe{
    25%   {left:0%}
    60% {left:-100%}
}
@-webkit-keyframes secondframe{
    25%   {left:0%}
    60% {left:-100%}
}