JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bumpycontainer">
    <div class="bumpy first-animate">
        <img class="bumpyimg" src="https://cdn3.iconfinder.com/data/icons/business-and-finance-icons/512/Briefcase-512.png" />
    </div>
    <div class="bumpy second-animate">
        <img class="bumpyimg" src="https://cdn3.iconfinder.com/data/icons/business-and-finance-icons/512/Briefcase-512.png" />
    </div>
    <div class="bumpy third-animate">
        <img class="bumpyimg" src="https://cdn3.iconfinder.com/data/icons/business-and-finance-icons/512/Briefcase-512.png" />
    </div>     
</div>

CSS

.container
{
    width: 300px;
    height: 25px;
    background-color: blue;
}

.suitcase-img
{
    width: 25px;
    
}

.container .my-suitcase
{
    float: left;
    /* background-color: red; */
    /* transition-timing-function: cubic-bezier(1,0,1,0); */
    transition-timing-function: ease-out;
    transition-duration: 1.7s;
    display: inline-block;
    /* visibility: hidden; */
    opacity: 1;
    position: relative;
    /* bottom: 10px; */
    bottom: 0px;
}

.container:hover .anim-one img
{
    -webkit-animation: bump-suitcase 1.0s ease-out forwards;    
    -webkit-animation-delay: 0s;
}

.container:hover .anim-two img
{
    -webkit-animation: bump-suitcase 1.0s ease-out forwards;    
    -webkit-animation-delay: 1s;
}

.container:hover .anim-three img
{
    -webkit-animation: bump-suitcase 1.0s ease-out forwards;    
    -webkit-animation-delay: 2s;
}

.container:hover .anim-four img
{
    -webkit-animation: bump-suitcase 1.0s ease-out forwards;    
    -webkit-animation-delay: 3s;
}

.container:hover .anim-five img
{
    -webkit-animation: bump-suitcase 1.0s ease-out forwards;    
    -webkit-animation-delay: 4s;
}

.container:hover .anim-six img
{
    -webkit-animation: bump-suitcase 1.0s ease-out forwards;    
    -webkit-animation-delay: 5s;
}

@-webkit-keyframes shake-suitcase {
    15% {
        width: 25px;
     -ms-transform: rotate(14deg); /* IE 9 */
    -webkit-transform: rotate(14deg); /* Chrome, Safari, Opera */
    transform: rotate(14deg);   
    }
    
    30% {
        width: 25px;
     -ms-transform: rotate(-14deg); /* IE 9 */
    -webkit-transform: rotate(-14deg); /* Chrome, Safari, Opera */
    transform: rotate(-14deg);   
    }
    
    45%
    {
        width: 25px;
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);   
    }
    
    60%
    {
        width: 25px;
    }
    
    80%
    {
        width: 35px;
    }
    
    100% {
  ...