CSS transition-delay not working

Question

I am trying to make an image make itself bigger when hovering over it. However the transition-delay property does not seem to work. The image is loaded by an object tag, however I have also tried using the img tag.

Fiddle

<div id="c_a">
<object data="https://lh6.ggpht.com/Rr2X9m8HrCIGJrOKG3MOr9pRYERaa4yBLWUTeB6YNgJVlseJSMIbFWDc9nX6O2Y9HeWRf-2qL1gy0TInmKtKfRIBAJVPK4eglImapFb9=s660" type="image/jpg"></object>
</div>

CSS:

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

Answer 1

I had a problem where transition-delay was not working It's important to put transition-delay after transition property!

transition:
transition-delay:

Answer 2

Give initial width and height of 100% to begin with.

#c_a object{
   width:100%;
   height:100%;
   // transitions..
}

Working Fiddle

Answer 3

My transition-delay wasn't working either, but corbacho's solution did not do it for me. However, I discovered that if I change transition to transition-duration then it works!

transition-duration:
transition-delay:

By the way, the order doesn't make a difference for me on this.