translate和top在CSS中有什么区别？
示例：
这两个有什么区别
此：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>@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>哪个更好用？
1条答案
按热度按时间goqiplq21#
看看这个html5 Rocks article，它强烈建议用翻译来制作动画。
为什么？改变'top'属性会触发布局，而translate不会。
您应该始终注意避免为将触发布局或绘制的属性设置动画，这两种方法都很昂贵，并且可能导致跳过帧。声明式动画比命令式动画更可取，因为浏览器有机会提前优化。
参见this post：
顶部/左侧有非常大的时间来绘制每一帧，这导致了更不稳定的过渡。所有的CSS，包括一些大的盒子阴影，都是在CPU上计算的，并在每一帧的渐变背景下合成。另一方面，翻译版本将笔记本电脑元素提升到GPU上它自己的层（称为渲染层）。现在它位于自己的层上，任何2D变换，3D变换或不透明度更改都可以完全在GPU上发生，这将保持非常快的速度，并仍然为我们提供快速的帧速率。