html - 使用背景图像平滑过渡

Question

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

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

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

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

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