Jquery CSS3动画，平移到位置

我有一个div，我点击它来拖动它。一旦它位于某个区域上，它将通过以下方式设置其位置的动画：

$("#wheel1").animate({left: "200px", top: "100px"});

我还可以通过以下方式设置动画：

@-webkit-keyframes wheel1 {
    0% {
    }
    100% {
        -webkit-transform: translate(200px, 100px);
    }
}

区别在于；使用jQuery，它将从文档的左侧动画设置为200px。使用CSS3，它会从您放置它的位置设置200px的动画（这很糟糕）

---

有没有办法让CSS3像jQuery那样从文档的左上角动画化？我尝试过更改变换原点和其他一些设置，但没有成功。

我不是CSS3变换方面的专家，但我认为

转换

与元素的原始位置有关

我可以看到，通过CSS实现您想要的功能的一种方法是绝对定位元素，并使用CSS3

transition

更改其

left

和

top

属性

这是一把小提琴：

HTML:

jQuery：

$(document).ready(function() {
    $('.box').on('click', function() {
        $(this).addClass('move');
    });
});

---

JS的目的是在单击元素时将

move

类添加到元素中。

如果我错了，请纠正我，但是您想要使用CSS3动画的原因是因为jQuery动画没有做CSS3动画可以做的事

如果我是正确的，那么看看这个名为的jQuery插件，它允许您将所有CSS3动画应用到任何选择器，就像它在CSS3格式中应用一样，但它是通过编程jQuery方法完成的

该插件可以处理大量的CSS3滑动和移动需求，以及任何其他CSS3动画。上面的链接在整个页面上都有示例

---

如果这不是您想要的，请意识到当一个对象被“放入”另一个元素时CSS无法“检测”。这里有一个

：hover

伪触发器，但无论发生什么情况，每次都会触发，FYI，要使用CSS动画（而不是如所选答案所示的过渡），只需在关键帧中使用

left

，而不是translate

@-webkit-keyframes wheel1 {
    0% {}
    100% {
        left:200px; top: 100px;
    }
}

---

我不确定边距会有什么帮助，jQuery方式已经很完美了，有了CSS3，您如何翻译边距？我不确定您是否正确阅读了这个问题。使用left/right对jQ来说很好。jQ解决方案是可靠的，并且可以工作。我正试图通过CSS动画实现与CSS3完全相同的功能。不能使用边距和位置，它必须是translateX/yth这可能是上/左/右/下转换（即使在CSS而不仅仅是jQuery中）与使用

translate有何不同的上下文中的一个相关链接：我会尝试一下，谢谢。我之所以尝试在jQuery上使用CSS3，是因为它更高效。我读到它还将所需的工作传递给GPU，而不是CPU。我不怀疑这一点，因为当我将7000px的背景从屏幕的一侧翻译到另一侧时，它与jQ配合得很好，但与CSS配合得非常顺利。请对此表示怀疑。。。请参阅我的纯CSS动画声纳波浪效果。Firefox在Chrome唱歌时窒息。也就是说，分析需要查看您所谈论的特定代码，以了解为什么jQuery速度慢。对不起，可能应该提到“对于iPad”，啊，这当然是一个改变游戏规则的因素。我建议您在SO问题中提及目标浏览器/设备。另外，如果您使用jQuery mobile，那么这也是一个与您现在显示的不同的标记。
$(document).ready(function() {
    $('.box').on('click', function() {
        $(this).addClass('move');
    });
});

@-webkit-keyframes wheel1 {
    0% {}
    100% {
        left:200px; top: 100px;
    }
}