/***************************************************************************************************
 Animate-Bouncy
 -> Animating vertically jumpy element (text, image, etc.)
 -> CSS Animation Property
    ->> animation-name = animate-bouncy-keyframe
        The name of animation to use. This must match with the keyframes definition.
    
 -> @keyframes
    The actual animaton. Here, we define how the bounce should behave. We use translateY() to 
    set how high the jump is.
 
 -> Delay vs. NoDelay: 
    We try to animate further by spacing out the bounce period by setting the delay property.
    Having set this, each bouncy element can jump at different rate causing chaotic bounces.
 
 -> CSS Validator:
    Requires the "standard" property to come LAST after "vendor-specific" property. 
    
 -> REF
    (*) https://www.w3schools.com/css/css3_animations.asp
 **************************************************************************************************/
.animate-bouncy-nodelay,
.animate-bouncy-delay {
    display: inline-block;

    -moz-animation: animate-bouncy-keyframe 1s ease infinite alternate;
    -webkit-animation: animate-bouncy-keyframe 1s ease infinite alternate;
    -o-animation: animate-bouncy-keyframe 1s ease infinite alternate;
    -ms-animation: animate-bouncy-keyframe 1s ease infinite alternate;
    animation: animate-bouncy-keyframe 1s ease infinite alternate;
}

.animate-bouncy-nodelay {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -o-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
}

.animate-bouncy-delay {
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

@-moz-keyframes animate-bouncy-keyframe { 
    50% { 
        -moz-transform: translateY(-25px);
        transform: translateY(-25px); 
    }
} 
@-webkit-keyframes animate-bouncy-keyframe { 
    50% { 
        -webkit-transform: translateY(-25px); 
        transform: translateY(-25px); 
    }
} 
@-o-keyframes animate-bouncy-keyframe { 
    50% { 
        -o-transform: translateY(-25px); 
        transform: translateY(-25px); 
    }
} 
@-ms-keyframes animate-bouncy-keyframe { 
    50% { 
        -ms-transform: translateY(-25px); 
        transform: translateY(-25px); 
    }
} 
@keyframes animate-bouncy-keyframe { 
    50% { transform: translateY(-25px); }
}