CSS过渡无法正常工作

Question

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,

Answer 1

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 .

Answer 2

你的CSS正在改变从一无所有的背景图像的图像 ，它在当前一代的CSS不能动画。

Answer 3

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?