JavaScript时序与CSS时序

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类中添加了初始位置属性；忘记添加它。

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/