JSFiddle - React, Tailwind, and code Playground

by Cal Francesco

HTML

<div class="container">
    <div class="cards">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
       
    </div>
</div>

CSS

.container{
    width:300px;
    height: 100px;
    border: 2px solid black;
    overflow: hidden;
}
.card{
    float:left;
   /* height: 100px;
    width: 100px;*/
    background-color:blue;
    box-sizing: border-box;
    border: 2px solid red;
    color: white;
    font-size: 23px;
    /**/
    flex:0 0 25%;
}
.cards:hover{
    animation: trans 3s linear;
}

/**/
.cards{
    width:400px;
    height:100%;
    display:flex;
}


@keyframes trans {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100px)
  }

}

JavaScript

var anim;

$('.cards').mouseenter(function(){
	$('.cards').append(($('.card').first()).clone());
    
    anim = setTimeout(function(){
        $('.card').first().remove();
        anim = false;
    },3000);
});

$('.cards').mouseleave(function(){
     if (anim){
         clearTimeout(anim) ;
     	 $('.card').first().remove();
     }
});