0

我有以下代码：http: //jsfiddle.net/8TG8L/

在我的 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/

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

4

3 回答 3

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

小提琴。

于 2013-05-23T18:13:52.023 回答
0

您的 css 正在将背景图像从nothing更改为 image，当前一代的 CSS 无法为其设置动画。

于 2013-05-23T18:01:50.653 回答
0

您不能将背景图像从图像转换none为图像，请参阅 MDN 上的此文档。从图像到图像的转换也没有令人惊叹的浏览器支持；据我所知，它仅在 Chrome 中受支持。

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

一个元素变得不可见opacity: 0;然后opacity: 1;在悬停时过渡到怎么样？

于 2013-05-23T18:11:17.523 回答