<div>
<ul class="deck">
<li><img src="https://picsum.photos/200/350.jpg">
<li><img src="https://picsum.photos/220/300.jpg">
<li><img src="https://picsum.photos/300/320.jpg">
<li><img src="https://picsum.photos/100/150.jpg">
<li><img src="https://picsum.photos/200.jpg">
<li><img src="https://picsum.photos/200/330.jpg">
<li><img src="https://picsum.photos/250/300.jpg">

</ul>
</div>

div{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  height:50vh;
}
.deck{
  margin-left: -30%;
}
.deck li img {
  max-width:250px;
  display:block;
  image-rendering: crisp-edges;
}
.deck li {
    position: absolute;
    border: solid 5px #FFF;
    z-index:5;
    transform:translatex(0) rotate( 20deg );
    transition: all 1s ease-in-out;
    filter: blur(4px);
}
.deck li:nth-last-child(5) {
    transform:translatex(15%) rotate( 15deg );
    filter: blur(3px);
}
.deck li:nth-last-child(4) {
transform:translatex(30%) rotate( 10deg );
    filter: blur(2px);
}
.deck li:nth-last-child(3) {
transform: translatex(45%) rotate( 5deg );
    filter: blur(1px);
}
.deck li:nth-last-child(2) {
    /* Si ponemos el rotate a cero es como desactivarlo, y se nota el salto  */
transform: translatex(60%) rotate( 0.1deg );
  /* Aqui tambien  */
      filter: blur(0.1px);
}
.deck li.fly {
  animation: flip 1s forwards ease-in-out;
  z-index:10;
}
@keyframes flip {
    0%   {transform:translatex(60%) rotate( 0.1deg );filter: blur(0.1px); z-index:10}
    50%  {transform:translatex(-130%) rotate(30deg);filter: blur(2px); }
    100% {transform:translatex(0) rotate(20deg); z-index:0}
}

 window.onload = function() {
      $(".deck li:last-child").addClass("fly");
   setInterval(function(){ 
      $(".deck li:last-child").detach().prependTo(".deck");
      $(".deck li:first-child,.deck li:last-child").toggleClass("fly");
   }, 2000);
}