JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<div class="wrapper">

<div class="button_one">
    <p>Bounce</p>
</div>
  
<div class="button_two">
    <p>Bounce</p>
</div>
  
</div>

CSS

body {
    padding: 20px;
    background: #e8e8e8;
    -webkit-transform: translate3D(0, 0, 0);
}

.wrapper {
    width: 200px;
    margin: 0 auto;
}

p {
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 22px;
    font-weight: 200;
    padding: 10px;
    letter-spacing: 1px;
    text-shadow: 0px 0px 5px #393939;
    color: #fff;
}

.button_one {
    width: 200px;
    height: 40px;
    margin: 0 0 10px;
    text-align: center;
    border-radius: 5px;
    background: #bd378f;
}

.button_one:hover {
    -webkit-animation: bounce 0.8s forwards;
            animation: bounce 0.8s forwards;
}

.button_two {
    width: 200px;
    height: 40px;
    text-align: center;    
    border-radius: 5px;
    background: #bd378f;
}

.button_two:hover > p {
    -webkit-animation: bounce 0.8s forwards;
            animation: bounce 0.8s forwards;
}

@-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: scale(1.0); }    
}