JSFiddle - React, Tailwind, and code Playground
HTML
<div class="button_one">
<p>bounce</p>
</div>
<div class="button_two">
<p>bounce</p>
</div>
CSS
body {
background: #e8e8e8;
transform: translate3d(0,0,0);
}
p {
font-family: Helvetica, Arial, sans-serif;
font-weight: 200;
line-height: 39px;
font-size: 22px;
text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
color: #fff;
}
/* Button Nr One Start */
.button_one {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 40px;
margin: 0;
padding: 0;
background: #bd378f;
text-align: center;
border-radius: 20px;
-webkit-transform: translate3d(0,0,0);
}
.button_one:hover {
-webkit-animation: bounce 0.8s forwards;
animation: bounce 0.8s forwards;
}
/* Button Nr One End */
/* Button Nr Two Start */
.button_two {
position: absolute;
top: 50px;
left: 300px;
width: 200px;
height: 40px;
margin: 0;
padding: 0;
background: #bd378f;
text-align: center;
border-radius: 20px;
}
.button_two:hover > p {
-webkit-animation: bounce 0.8s forwards;
animation: bounce 0.8s forwards;
}
/* Button Two End */
/* Keyframes for the bounce */
@-webkit-keyframes bounce {
0% { -webkit-transform: scale(1.0); }
10% { -webkit-transform: scale(1.2); }
20% { -webkit-transform: scale(1.3); }
30% { -webkit-transform: scale(1.2); }
40% { -webkit-transform: scale(1.0); }
50% { -webkit-transform: scale(1.1); }
60% { -webkit-transform: scale(1.0); }
70% { -webkit-transform: scale(1.05);}
80% { -webkit-transform: scale(1.0); }
90% { -webkit-transform: scale(1.02);}
100% { -webkit-transform: scale(1.0); }
}
@keyframes bounce {
0% { transform: scale(1.0); }
10% { transform: scale(1.2); }
20% { transform: scale(1.3); }
30% { transform: scale(1.2); }
40% { transform: scale(1.0); }
50% { transform: scale(1.1); }
60% { transform: scale(1.0); }
70% { transform: scale(1.05);}
80% { transform: scale(1.0); }
90% { transform: scale(1.02);}
100% { transform:...