Test Case - Webkit Transform + Render

by darcyclarke

HTML

<div></div>

<a href="#">Show/Hide</a>

CSS

div {
 background: #bada55;
 height: 60px;
 width: 60px;
    display: block;
 margin: 20px auto;
-webkit-animation-name: rotatePreloader;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
    
}

@-webkit-keyframes rotatePreloader {
    from    { -webkit-transform: rotate(0deg); }
    to      { -webkit-transform: rotate(360deg); }
}

JavaScript

$("a").bind("click", function(e){
    if($("div").is(":hidden")){
        $("div").css({opacity:"1",visibility:"visible"});
    } else {
        $("div").css({opacity:"0", visibility:"hidden"}); 
    }
 });