Pure CSS tooltip - with CSS3 animation

HTML

<div class="Games" id="games"><p>GAMES</p></div>
<div class="Events" id="events"><p>EVENTS</p></div>
<div class="Sports" id="sports"><p>SPORTS</p></div>

CSS

@-webkit-keyframes Bounce-In 
{
    0% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
    60% { -webkit-transform: scale(0.7) }
    80% { -webkit-transform: scale(1.0) }
    90% { -webkit-transform: scale(0.9) }
    100% { -webkit-transform: scale(1.0) }
}

@-webkit-keyframes Bounce-Out 
{
    0% { -webkit-transform: scale(1.0) }
    40% { -webkit-transform: scale(0.1) }
    60% { -webkit-transform: scale(0.4) }
    80% { -webkit-transform: scale(0.1) }
    90% { -webkit-transform: scale(0.2) }
    100% { -webkit-transform: scale(0) }
}

.Games 
{
    height: 117px;
    width: 117px;
    position: relative;
    top: 100px;
    left: 475px;
    z-index: 200;
    -webkit-animation-name: Bounce-In;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: .4s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1.2s;
    background-color: red;
    -webkit-border-radius:117px;
    line-height:117px;
    text-align:center;
    font-family: Arial;
    font-size: 16pt;
}

.Events 
{
    background-color: red;
    -webkit-border-radius:117px;
    height: 117px;
    width: 117px;
    position: absolute;
    top: 140px;
    left: 315px;
    z-index: 200;
    -webkit-animation-name: Bounce-In;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: .6s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1.2s;
    line-height:117px;
    text-align:center;
    font-family: Gloucester;
    font-size: 16pt;
}

.Sports 
{
    background-color: red;
    -webkit-border-radius:117px;
    height: 117px;
    width: 117px;
    position: absolute;
    top: 140px;
    left: 150px;
    z-index: 200;
    -webkit-animation-name: Bounce-In;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 1.0s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1.2s;
    line-height:117px;
    text-align:center;
    font-family: Gloucester;
   ...

JavaScript

document.getElementById('games').onmouseup = function () {
        events.style.webkitAnimationName = "Bounce-Out";
        sports.style.webkitAnimationDelay = "0.2s";
        sports.style.webkitAnimationName = "Bounce-Out";
    }