javascript - CSS3过渡会立即发生吗？

我有一个称为#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");
});

最佳答案

元素需要先在页面上绘制，然后才能转换。如果添加一个元素，最好在更改样式之前为初始状态提供10-100ms的渲染时间。

您可能还需要考虑使用动画，而您可以毫不拖延地进行动画处理。

这是我用来从右侧向页面中移动某些内容的动画，可以随时对其进行修改以满足您的需求。

.some_class{
    -webkit-animation: myanimation 500ms ease-in-out;
    -moz-animation: myanimation 500ms ease-in-out;
    animation: myanimation 500ms ease-in-out;
}

@-webkit-keyframes myanimation {
    0%   { left: 200%; }
    100% { left: 0%; }
}
@keyframes myanimation {
    0%   { left: 200%; }
    100% { left: 0%;}
}