Thanks For Using Chrome

It's just a fact that Chrome is the best browser. It supports the most features, is always on the cutting edge, usually runs effects/transitions better (hence the mega amount of RAM it uses), and is very forgiving/smart.

Hence, I've decided to add this to my applications when I can:

That's just a GIF but on the live sites, I set it up to where when a person hovers over the phrase, the animation kicks in, then reverts on hover-out. I'm using a font-awesome icon and a JavaScript library called bowser to detect Chrome. Code looks like this:

HTML:

<div class="browser-message" style="display:none;"><br>
    <em>
        The developer thanks you for using 
        <div id="chrome-hover">
            <span>Chrome</span>
            <i class="fa fa-lg fa-chrome"></i>
        </div>
    </em>
</div>

CSS:

    .browser-message {
        font-size: 20px;
    }


#chrome-hover {
    display: inline-block;
    background-color: #fff;
    transition: all 0.8s ease;
    overflow: hidden;
    width: 31px;
    position: relative;
    top: 13px;
    height: 35px;
}

#chrome-hover span {
    position: absolute;
    z-index: 0;
    left: 0;
}

#chrome-hover i {
    padding: 2px 3px 2px 2px;
    position: relative;
    background-color: #fff;
    z-index: 1;
    left: 0;
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
    left: 0px;
    transition: all 0.8s ease;
}

.browser-message:hover #chrome-hover {
    width: 102px;
}

.browser-message:hover #chrome-hover i {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
    left: 72px;
}

JavaScript:

    $(function(){
        if(bowser.name == 'Chrome'){
            $('.browser-message').show();
        }
    });

Simple as that. Thank your users!