title: CSS transition-delay not working
body: <p>I am trying to make an image make itself bigger when hovering over it. However the <code>transition-delay</code> property does not seem to work. The image is loaded by an <code>object</code> tag, however I have also tried using the <code>img</code> tag.</p>
  
  <p><a href="http://jsfiddle.net/WhJNV/embedded/result/" rel="noreferrer">Fiddle</a></p>
  
  <pre><code>&lt;div id="c_a"&gt;
  &lt;object data="https://lh6.ggpht.com/Rr2X9m8HrCIGJrOKG3MOr9pRYERaa4yBLWUTeB6YNgJVlseJSMIbFWDc9nX6O2Y9HeWRf-2qL1gy0TInmKtKfRIBAJVPK4eglImapFb9=s660" type="image/jpg"&gt;&lt;/object&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#c_a object{
    transition: width 1s linear 2s, height 1s linear 2s;
    -webkit-transition: width 1s linear 2s, height 1s linear 2s;
    -o-transition: width 1s linear 2s, height 1s linear 2s;
    -moz-transition: width 1s linear 2s, height 1s linear 2s;
  }
  #c_a object:hover{
    width: 300%;
    height: 300%;
  }
  </code></pre>