webkit translateX动画正在回归初始位置

Question

我正在尝试为移动webkit做一个图像库,

它实际上足够快的唯一方法是使用硬件加速的translateX.

我的问题是div在动画结束时收回它的初始位置.我在左侧按钮上添加了slideGalLeft类.到动画div

你可以在回调事件部分看到一个例子:http: //position-absolute.com/jqtouch/demos/main/#home

    .slideGalLeft {
    -webkit-animation-name: slideColis;
}


@-webkit-keyframes slideColis {
    from { -webkit-transform: translateX(0%); }
    to { -webkit-transform: translateX(-100%); }
}

Answer 1

不要使用webkit动画,因为它返回到播放后的默认值.而是定义

.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%);
}

并使用Javascript,设置-webkit-transform: translateX(100%);或添加CSS类到您的元素,设置最终的转换值,webkit将正确设置它的动画

Answer 2

纪尧姆的答案很棒.但是,如果您正在寻找硬件加速,您必须让webkit引擎知道您想要3D渲染(使硬件加速活跃的原因).

根据http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell,这是通过将translateZ(0)添加到您的规则来完成的,如下所示:

.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%) translateZ(0);
}

除此之外,请遵循Guillaume的建议.