Chrome Test

by AaronLayton

HTML

<a id="start" class="chrome-sprite"></a>

CSS

html,body {height:100%;width:100%;}
body {
    background: #45a1e2; /* Old browsers */
    background: -moz-linear-gradient(top,  #45a1e2 0%, #1284d1 80%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45a1e2), color-stop(80%,#1284d1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #45a1e2 0%,#1284d1 80%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #45a1e2 0%,#1284d1 80%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #45a1e2 0%,#1284d1 80%); /* IE10+ */
    background: linear-gradient(top,  #45a1e2 0%,#1284d1 80%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45a1e2', endColorstr='#1284d1',GradientType=0 ); /* IE6-9 */
}
.chrome-sprite {
    background:url(http://paulirish.com/lovesyou/new-browser-logos/all-browser_logos/browser_logos-128.png) -17px -7px no-repeat;
    display:block;
    height:116px;
    width:116px;
}
#start { cursor:pointer;position:fixed;top:50%;left:50%;margin:-58px 0 0 -58px;
     -webkit-animation-name: FadeIn;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;
}
#start:after {
background: #050505;
bottom: -10px;
content: ' ';
display: block;
height: 20px;
left:50%;
margin-left:-58px;
position: absolute;
width: 116px;
z-index: -1;
background: -moz-radial-gradient(center, ellipse cover,  rgba(5,5,5,0.7) 0%, rgba(5,5,5,0) 60%, rgba(5,5,5,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(5,5,5,0.7)), color-stop(60%,rgba(5,5,5,0)), color-stop(100%,rgba(5,5,5,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(5,5,5,0.7) 0%,rgba(5,5,5,0) 60%,rgba(5,5,5,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(5,5,5,0.7) 0%,rgba(5,5,5,0) 60%,rgba(5,5,5,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center,...

JavaScript

$('#start')
    .css({
        top:'52%',
        opacity:0
    })
    .animate({
        top:'50%',
        opacity:1
    },1000, 'swing');