CSS3 Transitions happen instantly?

Question

I have an element called #artwork which needs to be animated:

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

The problem is, the transition happens instantly without any delay (in my case 20s). I have tried Jquery's toggleClass function to no avail and I also tried the css function which also didn't work.

$(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

The element needs to be drawn on the page before it can be transitioned. If you add an element it's a good rule of thumb to give 10-100ms for the initial state to render before changing it's styles.

You may also want to consider using an animation instead, which you can do without the delay.

Here's an animation I've used to move something into the page from the right, feel free to modify it to suit your needs.

.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%;}
}