css - CSS 中的 Translate 和 Top 有什么区别

Question

CSS 中的 translate 和 top 有什么区别？

示例:

有什么区别

这个: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>

还有这个: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>

哪个更好用？

Answer 1

看看这个 html5 Rocks article强烈建议使用翻译制作动画。

为什么？更改“top”属性会触发布局，translate 不会。

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.

另见 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.