JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="wrapper">
  <div class="photos">
    <div class="photo photo-1"></div>
    <div class="photo photo-2"></div>
    <div class="photo photo-3"></div>
  </div>
</div>

CSS

@keyframes bounceInRight {
  0%,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    /*transform: none;*/
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

.photo {
  float: left;
  margin: 0 10px;
  background: grey;
  width: 100px;
  height: 300px;
}

.photo {
  animation-name: bounceInRight;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.photo:hover {
  transform: scale(1.1) !important;
  background: green;
}

.photo-1 {
  animation-delay: 0s;
}
.photo-2 {
  animation-delay: 1s;
}
.photo-3 {
  animation-delay: 2s;
}