JavaScript计时与CSS计时

考虑以下CSS属性：

.front{
transition: left 2s;
left : 0px;
}

这个JQuery函数：

var delay = 5000;
setTimeout(function(){
$('.front').animate({left: '1300px'}, { duration: 500});
,delay} 

现在持续时间是0.5秒。 延迟设置为5秒。 过渡时间为2秒

我已经做了很多尝试来找出谁赢得了时间之战，但我做不到

你能帮我告诉我脚本运行时到底发生了什么吗

编辑：我在css类中添加了初始位置属性；忘记添加它了。

您的脚本：

• 等待5秒钟
• 然后在半秒内使用.front类设置元素位置的动画

根据您向我们展示的内容，CSS实际上什么都没有做。请注意，CSS转换与jQuery动画不同

更新：

基于我的评论的一个例子：

.front{
    left: 500px
    transition: left 2s;
}

.front.animate {
    left: 0px;
}

var delay = 5000;
setTimeout(function(){
    $('.front').addClass('animate');
,delay} 

---

Fiddle:

您到底在问什么？将CSS转换与JavaScript动画一起使用会产生意外/不良影响。@DA最后一行是我的问题。@未定义解释了我的许多奇怪结果。转换属性如何？你的意思是它被忽略了吗？仅仅根据你展示给我们的，它没有被忽略，只是没有任何作用。CSS位置转换需要开始位置和结束位置。你的CSS两者都没有。你是通过jQuery制作动画的。如果你想用jQuery制作vis-CSS转换动画（这是一个好主意，因为你可以利用硬件加速），那么你可能想做的是在CSS类中设置所有动画逻辑。然后使用jQuery简单地添加和删除所述类以触发所有动画。对不起，我应该在我的示例中注意到，我放了定义其原始位置的那行。不，与您的示例不同；这是一个非常好的主意，我想我会用它，tho:）