Transition vs 3d Transforms

3d transforms are much faster than transitions and work in all major mobile browsers (iOS4, iOS5, Android 2, Android 4)

by vishl

HTML

<div id="container">
    <div id="transition" class="clickable">Transition (click)</div>
    <div id="transform" class="clickable">Transform (click)</div>
</div>

CSS

#container{
    width:100%;
}

.clickable{  
    position:absolute;
    left:0px;
    top:0px;
    
    width:100px;
    height:100px;
    margin:20px;
    border:solid black 2px;

    -webkit-transition:all .2s linear;
}

#transition{
    background:yellow;
}

#transition.active{
    left:200px;
}

#transform{
    top:120px;
    background:green;
    -webkit-transform: translate3d(0,0,0);
}

#transform.active{
    -webkit-transform: translate3d(200px,0,0);
}

</style>

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style>

JavaScript

$(function(){
    $('.clickable').click(function(){$(this).toggleClass('active');});
});