JSFiddle - React, Tailwind, and code Playground

by johnoscott

HTML

<div id="bouncywrap">
    <div id="bouncy01">Drip</div>
    <div id="bouncy02">droP</div>
<div>

CSS

@-webkit-keyframes bounce {
    0% { padding-top:1px;}
    50% { padding-top:5px;} /*desired value +1*/
    100% { padding-top:1px;}
}

#bouncy01,
#bouncy02 {
    margin:10px;
    background: #ff0000;
    padding: 10px;
    border: 1px solid #777;
    width:30px;
       position:absolute;
}
#bouncywrap {
    -webkit-animation:bounce 1s ease-in-out infinite;
    position:relative;
    width:140px;
    height:50px;
/*    background:grey;*/
}
#bouncy02 {
    background: #ffff00;
    left:60px;
    top:2px; /*half of desired value*/
}
#bouncy02:hover {
    position:relative;
    top:0px;
 }