title: CSS3 Transitions happen instantly?
body: <p>I have an element called <code>#artwork</code> which needs to be animated:</p>
  
  <pre><code>#artwork{
  -webkit-transition: all 20s ease-in;
  transition:all 20s ease-in;
    width:75%;
    display:block;
    margin:0px auto;
  }
  #artwork.trans{
    width:60%;
  }
  </code></pre>
  
  <p>The problem is, the transition happens instantly without any delay (in my case 20s). I have tried Jquery's <code>toggleClass</code> function to no avail and I also tried the <code>css</code> function which also didn't work.</p>
  
  <pre><code>$(window).load(function(){
    var addImage = function(background){
      $("#images").append("&lt;div class='image'&gt;&lt;img id='artwork' src='"+ background +"' /&gt;&lt;/div&gt;");
      $("#artwork").css("width", "65%");
      $("#artwork").toggleClass("trans");
    };
    addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
  });
  </code></pre>