css - CSS3如何保存动画位置

Question

在CSS3中是否可以保存元素经过变换后的位置？例如，假设我在下面有一个 block :

[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