Question

我正在设置图像的动画，以便当悬停在不透明度上升到1时，该部分工作完全正常，但是当图像在铬合金上盘旋时，第二列闪烁到一边。我已经在IE和Firefox中测试了它并且没有任何问题。

HTML：

<body class="blue4">
    <div class="content">
        <div class="work-item blue4">
            <a href="http://www.youtube.com/watch?v=SbjEgqPmtAs" title="Template#2 Intro"><img src="img/Template-2-Intro.png"/></a>
        </div>
    </div>
</body>

CSS：

.work-item{
    width:25%;
    opacity:0.8;
    overflow:hidden;
    display:block;
    float:left;
}

img{
    width:100%
}

.work-item:hover{
    opacity:1;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}

我也使用脚本将高度设置为等于动态宽度，这可能与它有关但我不确定..

SCRIPT：

$(function() {
    var div = $('.work-item');
    var width = div.width();

    div.css('height', width-5);
});

Answer 1

首先，将过渡属性放在普通元素中，而不是放在：悬停状态。然后，如果您只需要在不透明度上进行转换，请使用：

opacity 0.2s ease-in-out 0s

这种闪烁是Webkit浏览器中的一个已知错误，当您在流体元素上设置不透明度（此处为25％）时会发生这种错误。这是一个解决方法：

-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);

我知道这听起来像是黑客，但它有效......

Answer 2

我使用translate3D代替translateX：

img {-webkit-transform: translate3D(0,0,0);}

图片/ div在Google Chrome中悬停时闪烁

2 个答案: