Html – CSS transition-delay not working

css, css-transitions, html

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

Best Solution

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

transition:transition-delay: