webkit的平移X动画滚动回到初始位置

Question

我想移动的WebKit做一个图像库，

它实际上是足够快的唯一方法是使用硬件加速平移X。

我的问题是在div收回其初始位置在动画结束。我想补充的左键slideGalLeft类cliking。到动画的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

Guillaume的答案是伟大的。但是，如果你正在寻找的硬件加速，你必须让WebKit引擎知道你要的3D渲染（是什么让硬件加速激活）。

根据 http://www.html5rocks.com/tutorials /速度/ HTML5 /＃TOC-硬件ACCELL 的，这是通过添加translateZ（0）到您的规则，像这样完成的：

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

请纪尧姆的建议超出了。

Answer 3

使用：

-webkit-animation-fill-mode: none/backwards/forwards/both;

这允许你定义在什么目的你的动画当动画完成的元素仍然存在。

Answer 4

我能够使其通过添加“显示：无”工作，对动画的完成风格。使用下面的CSS：

.paused {
    -webkit-animation-play-state: paused;
}

.hiddendiv {
    display:none;
}

然后，在jQuery代码：

$('div.sideimage').click(
    function () {
        $(this).removeClass("paused").delay(2000).queue(
            function(next) {     
                $(this).addClass("hiddendiv");     
                next();
            }
        ); 
    }
);

应工作！