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 2.3s 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 () {
    $(".bumpy").each(function (index, value) {
        var result = 0;
        var i = index + 1;
        var partA = (i - 1);
        var partB = partA * 2;
        var partC = partB - 1;
        var partD = partC;
        var res = parseFloat(partC);
        if (res > 0.00) {
            partD = partD / 10;
        } else {
            partD = 0;
        }

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

    });
});