CODEWITHSUNDEEP
htmlcss
Or Weinberger
Or Weinberger

Reputation: 7482

CSS Transition not working properly

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

Answers (3)

Ryan Rahlf
Ryan Rahlf

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

Nils Kaspersson
Nils Kaspersson

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

JAM
JAM

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;*/
}

FIDDLE.

Upvotes: 1

Related Questions