Question

我正在转换几张背景图片。但是，我注意到，如果用户在转换完全生效之前采取行动，则转换是即时的。

例如，我将鼠标悬停在div上，图像需要1秒才能完全转换。但是，我将光标.5s移除到转换中。因此它转换回原始图像，但不是平滑过渡，而是立即改变。如何让它始终保持平稳？

＆＃13;

.class {
    width:500px;
    height:500px;
    background-image:url("http://activite-paranormale.net/extended/photo/news/nature-harmony-girl.jpg"); 
    -webkit-transition: all 1s ease 0;
    -moz-transition: all 1s ease 0;
    -o-transition: all 1s ease 0;
    transition: all 1s ease 0;
}
.class:hover {
    background-image:url("http://images4.fanpop.com/image/photos/22700000/Spring-beautiful-nature-22727146-500-500.jpg");
}

＆＃13;

<div class="class"></div>

＆＃13;

http://codepen.io/john84/pen/vEdPEW

Answer 1

fiddle

我将ease更改为ease-in-out

编辑：Firefox不支持此功能，但有很多解决方法，例如：
fiddle
HTML：

<div class="class"></div>
<div class="class2"></div>

CSS：

.class {
    position:absolute;
    width:500px;
    transition:all 500ms;
    height:500px;
    background-image:url("http://activite-paranormale.net/extended/photo/news/nature-harmony-girl.jpg"); 
}
.class2{
    width:500px;
    height:500px;
    background-image:url("http://images4.fanpop.com/image/photos/22700000/Spring-beautiful-nature-22727146-500-500.jpg");
}
.class:hover {
    opacity:0;
}

使用背景图像平滑过渡

1 个答案: