小编Ita*_*win的帖子

我已经阅读了有关如何使用转换的更好的性能的信息，但似乎它们的行为略有不同：使用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%);
    } …