Menu
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%;
}
652
CSS Demo: transition-delay A value of 0s (or 0ms ) will begin the transition effect immediately. A positive value will delay the start of the transition effect for the given length of time. A negative value will begin the transition effect immediately, and partway through the effect.
The transition-delay property specifies when the transition effect will start. The transition-delay value is defined in seconds (s) or milliseconds (ms).
The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
This will allow a transition to change its speed and different movement properties during its course. The transition-timing-function specifies the time an animation uses to change from one set of CSS transitions to another. The default value of the transition-timing-function is 'ease'.
I had a problem where transition-delay was not working
It's important to put transition-delay after transition property!
transition:
transition-delay:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
