Reputation: 7482
I have the following code: http://jsfiddle.net/8TG8L/
On another part of my HTML I can get the transition CSS to work great, but here on the right hand side I cannot get the transition to have any delay.
Relevant code:
.home_subvid_hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
EDIT:
To clarify, please look at this code: http://jsfiddle.net/9UuY7/
That one works although it's the same principle as the first one, why is that? Thanks,
Upvotes: 0
Views: 2444
Reputation: 1812
Your css is changing the background image from nothing to an image, which the current generation of CSS can't animate.
Upvotes: 0
Reputation: 9464
You can't transition background images from none
to an image, see this document on MDN. Transitioning from image to image doesn't have amazing browser support either; as far as I know it's only supported in Chrome.
You can, however, create a similar effect with different markup/CSS.
How about an element made invisible with opacity: 0;
and then transitioned into opacity: 1;
when hovered?
Upvotes: 0
Reputation: 6205
The reason the background isn't animated, is because the backround-image
isn't set on the initial class .home_subvid
.
You can't animate background-image:none
to background-image:url(...)
.
If you try this, it's gonna work:
.home_subvid {
background-image:url('http://placehold.it/1x1/000');
background-size: cover;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.home_subvid:hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
}
Upvotes: 1