CSS performance test

HTML

<h3>CSS performance test</h3>
<p>
    <button id="transform">Animate transform</button>
    <button id="transformZ">Animate transform + translateZ(0)</button>
    <button id="transformZ-shadow">Animate transform  + translateZ(0) + box-shadow</button>
    <button id="transform-shadow">Animate transform + box-shadow</button>
</p>

CSS

.box {
    width: 50px;
    height: 50px;
    position: relative;
    display: inline-block;
    background-color: hsl(206,80%,70%);
    border: 2px solid hsl(206,80%,50%);
    margin: 10px;
    box-shadow: 0 0 20px hsl(206,80%,70%);
}

/* First just a normal transform -> Performance: so so */
.transform .box {
    -webkit-animation: transform 1s linear infinite alternate;
}
@-webkit-keyframes transform {
      0% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(0); }
}

/* Next we add translateZ(0) -> Performance: Great! */
.transformZ .box {
    -webkit-animation: transformZ 1s linear infinite alternate;
}
@-webkit-keyframes transformZ {
      0% { -webkit-transform: scale(1) translateZ(0); }
    100% { -webkit-transform: scale(0) translateZ(0); }
}

/* Then we additionally animate a box-shadow -> Performance: Ouch! */
.transformZ-shadow .box {
    -webkit-animation: transformZ-shadow 1s linear infinite alternate;
}
@-webkit-keyframes transformZ-shadow {
      0% { -webkit-transform: translateZ(0) scale(1); box-shadow: 0 0 20px hsl(206,80%,70%); }
    100% { -webkit-transform: translateZ(0) scale(0); box-shadow: 0 0  0px hsl(206,80%,70%); }
}


/* Does it help if we remove translateZ(0)? -> Performance: Still Ouch. */
.transform-shadow .box {
    -webkit-animation: transform-shadow 1s linear infinite alternate;
}
@-webkit-keyframes transform-shadow {
      0% { -webkit-transform: scale(1); box-shadow: 0 0 20px hsl(206,80%,70%); }
    100% { -webkit-transform: scale(0); box-shadow: 0 0  0px hsl(206,80%,70%); }
}

JavaScript

for (var i = 0; i < 1000; i++) {
    $('body').append('<div class="box">');
}

$("#transform").click( function() {
    $("body").attr('class', 'transform');
});

$("#transformZ").click( function() {
    $("body").attr('class', 'transformZ');
});

$("#transformZ-shadow").click( function() {
    $("body").attr('class', 'transformZ-shadow');
});

$("#transform-shadow").click( function() {
    $("body").attr('class', 'transform-shadow');
});