Question

我已经了解了如何使用translate有更好的性能，但看起来它们的行为略有不同：使用left:100%将动画对象一直移动到屏幕的末尾，而translate(100%)仅移动动画对象的长度。也就是说，它移动100％的屏幕而不是100％的对象。

可以解释为什么会这样，以及在使用translate时可以采取哪些措施来重现相同的行为？

您可以在此处查看演示：http://jsfiddle.net/32VJV/1/

.slide_1 {
    top: 0px;
    left:0%;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}
.slide_1 {
    -webkit-animation: slide 3s infinite;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0% 0%;
}
.slide_2 {
    top: 25px;
    left:0%;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}
.slide_2 {
    -webkit-animation: slide2 3s infinite;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0% 0%;
}
@-webkit-keyframes slide {
    0% {
        -webkit-transform: translate(0%);
    }
    50% {
        -webkit-transform: translate(100%);
    }
    100% {
        -webkit-transform: translate(0%);
    }
}
@-webkit-keyframes slide2 {
    0% {
        left 0%;
    }
    50% {
        left:100%;
    }
    100% {
        left:0%;
    }
}

<div style="font-size:18px;">
    <div class=""> <span class="slide_1" id="dimensions">ABC</span>  <span class="slide_2" id="dimensions">ABC</span>

    </div>
</div>

Answer 1

两者之间的区别在于，为左边的属性设置动画会将元素保留在文档的流中，而translate则不会。

有关您可能使用其中一个的原因的更多信息，Paul Irish有一个很好的写作（包含更多信息的链接）：Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

jankfree.org

还有很多有关浏览器效果的重要信息

翻译动画的解决方案：使元素与窗口一样宽：

Example

slide_1 {
    top: 0px;
    left:0%;
    right: 0;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}

一个有趣的练习：打开你的devtools以及当你一次激活一个动画时会发生什么。

在Chrome中：

除了定期GC
您将反复看到的左侧动画：
- 重新计算风格
- 布局
- 疼痛设置
- 油漆
- 复合图层

在这种情况下，开销非常小，但可以根据屏幕上移动的内容快速变化。

CSS动画：左边的差异：100％和翻译（100％）

1 个答案: