带有CSS计时的JavaScript计时

Question

考虑以下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类中添加了初始position属性； 忘记添加它。

Answer 1

您的脚本：

• 等待5秒
• 然后用.front类将元素的位置动画化半秒

根据您向我们展示的内容，CSS实际上并没有做任何事情。 请注意，CSS过渡与jQuery动画不同。

更新：

基于我的评论的示例：

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

.front.animate {
    left: 0px;
}

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

小提琴： http : //jsfiddle.net/9q8sL/1/