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;
    -webkit-animation-name: Bounce-In;
    height: 117px;
    width: 117px;
    position: absolute;
    top: 140px;
    left: 150px;
    z-index: 200;
    -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

var initAnimationEnded = false;

// helper function to add a css rule
var addCssRule = function(rule) {
    var style = document.createElement('style');
    style.innerHTML = rule;
    document.head.appendChild(style);
}

document.getElementById('games').onmouseup = function() {
    if (initAnimationEnded) {
        // if starting animation is finished, proceed normally

        events.style.webkitAnimationName = "Bounce-Out";
        sports.style.webkitAnimationDelay = "0.2s";
        sports.style.webkitAnimationName = "Bounce-Out";
    } else {
         // pause the animation

        events.style.webkitAnimationPlayState = "paused";
        sports.style.webkitAnimationPlayState = "paused";

         // get the current transform scale of sports and events
        function getCurrentScaleValue(elem) {
          return document.defaultView.
          getComputedStyle(elem, null).
          getPropertyValue('-webkit-transform').
          match(/matrix\(([\d.]+)/)[1];
        }
        
        var currentSportsScale = getCurrentScaleValue(sports);
        var currentEventsScale = getCurrentScaleValue(events);

         // set up the first string for the keyframes rule

        var sportsTempAnimation = ['@-webkit-keyframes Sports-Temp-Bounce-Out {'];
        var eventsTempAnimation = ['@-webkit-keyframes Events-Temp-Bounce-Out {'];

         // basic bounce out animation

        var bounceOutAnimationBase = {
            '0%': 1,
            '40%': 0.1,
            '60%': 0.4,
            '80%': 0.1,
            '90%': 0.2,
            '100%': 0
        };

         // scale the animation to the current values

        for (prop in bounceOutAnimationBase) {
            sportsTempAnimation.push([prop, ' { -webkit-transform: scale(', currentSportsScale * bounceOutAnimationBase[prop], ') } '].join(''));
            eventsTempAnimation.push([prop, ' { -webkit-transform: scale(', currentEventsScale * bounceOutAnimationBase[prop], ') } '].join(''));
        }

       ...