What is the difference between Translate and Top in CSS

Question

What is the difference between translate and top in CSS ?

Example :

What is the difference between

this : http://jsfiddle.net/QS4Ha/

@keyframes bounce{
    0%, 20%, 50%, 80%, 100% { top: 90px; }
    40% { top: 60px; }
    60% { top: 80px; }
    
    }@-webkit-keyframes bounce{
    0%, 20%, 50%, 80%, 100% { top: 90px; }
    40% { top: 60px; }
    60% { top: 80px; }
    
    }@-moz-keyframes bounce{
    0%, 20%, 50%, 80%, 100% { top: 90px; }
    40% { top: 60px; }
    60% { top: 80px; }
    
    }@-o-keyframes bounce{
    0%, 20%, 50%, 80%, 100% { top: 90px; }
    40% { top: 60px; }
    60% { top: 80px; }
}

#bounceElement{
    position: relative;
    width : 300px;
    height: 100px;
    background: #DF3A01;
    animation: bounce 0.7s infinite;
    -webkit-animation: bounce 1s infinite;
    -moz-animation: bounce 1s infinite;
    -o-animation: bounce 1s infinite;
}

<div id="bounceElement">
    
</div>

and this : http://jsfiddle.net/GWYPb/

@keyframes bounce{
    0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(90px); }
    40% { -webkit-transform: translateY(60px); }
    60% { -webkit-transform: translateY(80px); }
    
    }@-webkit-keyframes bounce{
    0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(90px); }
    40% { -webkit-transform: translateY(60px); }
    60% { -webkit-transform: translateY(80px); }
    
    }@-moz-keyframes bounce{
    0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(90px); }
    40% { -webkit-transform: translateY(60px); }
    60% { -webkit-transform: translateY(80px); }
    
    }@-o-keyframes bounce{
    0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(90px); }
    40% { -webkit-transform: translateY(60px); }
    60% { -webkit-transform: translateY(80px); }
}

#bounceElement{
    position: relative;
    width : 300px;
    height: 100px;
    background: #DF3A01;
    animation: bounce 0.7s infinite;
    -webkit-animation: bounce 1s infinite;
    -moz-animation: bounce 1s infinite;
    -o-animation: bounce 1s infinite;
}

<div id="bounceElement">
    
</div>

Which is better to use ?

Answer 1

Check out this html5 Rocks article which strongly advises animating with translate.

Why? Changing the 'top' property triggers layout, translate doesn't.

You should always look to avoid animating properties that will trigger layout or paints, both of which are expensive and may lead to skipped frames. Declarative animations are preferable to imperative since the browser has the opportunity to optimize ahead of time.

Also see this post:

The top/left has very large time to paint each frame, which results in a choppier transition. All the CSS including some big box shadows, are computed on the CPU and composited against that gradient backdrop every frame. The translate version, on the other hand, gets the laptop element elevated onto it’s own layer on the GPU (called a RenderLayer). Now that it sits on its own layer, any 2D transform, 3D transform, or opacity changes can happen purely on the GPU which will stay extremely fast and still get us quick frame rates.