Question

我有两张并排的照片。目标是当你将鼠标悬停在它们上面时，它们会慢慢扩展并逐渐消失（同时包含在div中）。当您将鼠标移出悬停区域时，它们会恢复原状。

这在Firefox中很有用。在Chrome和Safari中，当您离开悬停区域时，不透明度会快速恢复到.4而不是从1缓动到.4（在Firefox中完美运行）。我错过了什么吗？

编辑/注意：不透明度需要比缩放图像更快地淡入。

#img-wrapper {
    width: 1100px;
    margin: 0 auto;
    position: relative;
    height: 550px;
}

.footer-btn a {
    font-weight: bold;
    line-height: 63px;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
}
.footer-btn {
    position: absolute;
    z-index: 9000;
    margin-top: 240px;
    -moz-box-sizing: border-box;
    background-color: #000;
    height: 63px;
    width: 400px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
}
.box {
    width: 550px;
    height: 550px;
    text-align: center;
    overflow: hidden;
    float: left;
}
.box img {
    width: 556px;
    height: 556px;
    padding: 0px;
    overflow: hidden;
    position: relative;

}
.footer-box {
    display: table;
    max-height: 550px;
    position: absolute;
    z-index: 9000;
}
.footer-box .blog {
    height: 556px;
    -webkit-transition: all 10s, opacity 5s;
    -moz-transition: all 10s, opacity 5s;
    -o-transition: all 10s, opacity 5s;
    -ms-transition: all 10s, opacity 5s;
    transition: all 10s, opacity 5s;
    opacity: .4;
}

.footer-box:hover .blog {
    cursor: pointer;
    height:556px;
    width: 556px;
    transform:scale(1.15);
    -ms-transform:scale(1.15); /* IE 9 */
    -moz-transform:scale(1.15); /* Firefox */
    -webkit-transform:scale(1.15); /* Safari and Chrome */
    -o-transform:scale(1.15); /* Opera */
    opacity: 0.9;
}

    <div id="img-wrapper">
        <div class="footer-box">
            <div class="box">
                <div class="footer-btn"><a class="btn" href=''>Button Text</a></div>
                <img class="blog" src="images/footer-splash-left.jpg" alt="">
            </div>
        </div>
        <div class="footer-box" style="right:0px;">
            <div class="box">
                <div class="footer-btn"><a class="btn" href=''>Button Text</a></div>
                <img class="blog" src="images/footer-splash-right.jpg" alt="">
            </div>
        </div>
    </div>

Answer 1

看起来你指向过渡中的两个不同的css属性，因此浏览器渲染“all 10s”和“opacity 5s”之间存在冲突

如果你将你的图像包装在一个div中并给该div一个包含所有不透明度样式的类，那么事情就应该有效了。

这是一个小提琴：http://jsfiddle.net/MathiasaurusRex/q3RNS/

<div class="opacityWrapper">
<img class="blog" src="http://lorempixel.com/400/200/" alt="">
</div>

.opacityWrapper{
   -webkit-transition:opacity 5s;
    -moz-transition:opacity 5s;
    -o-transition:opacity 5s;
    -ms-transition:opacity 5s;
    transition:opacity 5s; 
    opacity:.3;
}

.footer-box:hover .opacityWrapper{opacity:.9;}

CSS过渡比例/不透明度悬停兼容性

1 个答案: