如何保存动画位置CSS3

Question

在经历转换后，是否可以在CSS3中保存元素的位置？例如，假设我在下面有一个块：

[x]

我用-webkit-transform:translateX(15px);

移动了它

           [x]

当动画重复时，它将返回到：

[x]

我该如何制作，以便在动画重复时，它会在其新位置添加另一个15px？

                          [x]

如果这个问题令人困惑，请道歉，如果你问我，我可以尽力澄清。

谢谢！

Answer 1

我不知道如何使用严格的CSS来做到这一点，但是，使用jQuery这很简单。

我在div对象上定义了一个自定义属性anims，每次单击它时都会递增。单击div时，将该数字+ 1乘以15，并将div设置为该数量右侧的动画。动画完成后，div将移回其起点，准备再次单击。

$(document).ready(function(){

    $("div#green").click(function(){

        var distance = 15 * (1+parseInt($(this).attr("anims")));

        $(this).animate({
            "margin-left": distance 
        }, 1000, function(){

            $(this).css("margin-left", "0").attr("anims", (1+parseInt($(this).attr("anims"))));

        });

    });

});

JSFiddle

---

编辑：

如果您更愿意使用CSS转换，那也是可能的。

jQuery的：

$(document).ready(function(){

    $("div#green").click(function(){

        var distance = 15 * (1+parseInt($(this).attr("anims")));

        $(this).css({
            "-webkit-transform": "translateX("+distance+"px)",
            "-moz-transform": "translateX("+distance+"px)",
            "-ms-transform": "translateX("+distance+"px)",
            "-o-transform": "translateX("+distance+"px)",
            "transform": "translateX("+distance+"px)"
        });
        setTimeout(function(){

            $("div#green").css({
                "-webkit-transform": "translateX("+0+"px)",
                "-moz-transform": "translateX("+0+"px)",
                "-ms-transform": "translateX("+0+"px)",
                "-o-transform": "translateX("+0+"px)",
                "transform": "translateX("+0+"px)"
            }).attr("anims", (1+parseInt($("div#green").attr("anims"))));

        }, 1000);

    });

});

CSS：

div
{
    width: 100px;
    height: 100px;
    background: green;

    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

JSFIddle