JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.bumpycontainer {
    /* background-color: red;*/
}
.bumpy {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    background-color: white;
}
.bumpyimg {
    width: 50px;
}
.bumpycontainer:hover .bumpyride-animation {
    -webkit-animation: bumpyride 0.2s ease-out forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay:0s;
}
@-webkit-keyframes bumpyride {
    0% {
        bottom: 0px;
        background-color: white;
    }
    5% {
        bottom: 15px;
        background-color: #8dc63f;
    }
    11% {
        bottom: 0px;
    }
    35%
    {
        background-color: white;
    }
    100% {
        bottom: 0px;
        background-color: white;
    }
}

JavaScript

$(document).ready(

function () {
    var bumpyFound = $(".bumpy");
    var animationLengthPeriod = 0.2;
    if (bumpyFound.length < 4)
    {
        animationLengthPeriod = 0.4;
    }
    else if (bumpyFound.length < 6)
    {
        animationLengthPeriod = 0.3;
    }
    
    var myTime = 0;
    myTime = bumpyFound.length * animationLengthPeriod + (animationLengthPeriod/2);
    myTime = parseFloat(myTime).toFixed(1);
    
    $(".bumpyride-animation").css("-webkit-animation-duration", myTime + "s");    
    
    bumpyFound.each(function (index, value) {
        var result = 0;
        var i = index + 1;
        var partA = (i - 1);
        var partB = partA * (parseFloat(animationLengthPeriod)*10);
        var partC = partB - 1;
        var partD = partC;
        var res = parseFloat(partC);
        if (res > 0.00) {
            partD = partD / 10;
        } else {
            partD = 0;
        }

        $(this).css("-webkit-animation-delay", partD + "s");

    });
});