CSS3 过渡立即发生？

Question

我有一个名为#artwork需要动画的元素：

#artwork{
-webkit-transition: all 20s ease-in;
transition:all 20s ease-in;
  width:75%;
  display:block;
  margin:0px auto;
}
#artwork.trans{
  width:60%;
}

问题是，转换立即发生，没有任何延迟（在我的例子中是 20 秒）。我尝试过Jquery的toggleClass功能没有效果，我也尝试过该css功能也不起作用。

$(window).load(function(){
  var addImage = function(background){
    $("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
    $("#artwork").css("width", "65%");
    $("#artwork").toggleClass("trans");
  };
  addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});

Answer 1

当使用transition简写属性时，延迟被放置在最后。在您的代码中，您的转换将持续 20 秒，没有延迟。

如果你想让它延迟20s，应该这样写：

transition:all 2s ease-in 20s;

编辑

这是一个演示