Question

在我的HTML的另一部分，我可以使转换CSS工作得很好，但在右侧，我无法让转换有任何延迟。

相关代码：

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

修改：

为了澄清，请查看以下代码：http://jsfiddle.net/9UuY7/

虽然它的原理与第一个原理相同，但是为什么会这样？谢谢，

Answer 1

背景未设置动画的原因是因为未在初始类backround-image上设置.home_subvid。

您无法将background-image:none设为background-image:url(...)。

如果你试试这个，它会起作用：

.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正在将背景图像从 nothing 更改为图像，而当前一代CSS无法制作动画。

Answer 3

您无法将背景图片从none转换为图片see this document on MDN。从图像到图像的转换也没有令人惊叹的浏览器支持;据我所知，它仅在Chrome中受支持。

但是，您可以使用不同的标记/ CSS创建类似的效果。

如果某个元素与opacity: 0;不可见，然后在悬停时转换为opacity: 1;，那该怎么办？

CSS Transition无法正常工作

3 个答案: