我正在设置图像的动画,以便当悬停在不透明度上升到1时,该部分工作得非常好,但是当图像在铬合金上盘旋时,第二列闪烁到一边.我已经在IE和Firefox中测试了它并且没有问题.
请在这里查看:http://abmenzel.com/work/
HTML:
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; }
我也使用脚本将高度设置为等于动态宽度,这可能与它有关但我不确定..
脚本:
$(function() { var div = $('.work-item'); var width = div.width(); div.css('height', width-5); });
enguerranws.. 6
首先,将过渡属性放在普通元素中,而不是:悬停状态.然后,如果您只需要在不透明度上进行转换,请使用:
opacity 0.2s ease-in-out 0s
这种闪烁是Webkit浏览器中的一个已知错误,当你在流体元素上设置不透明度时会发生这种情况(这里是25%).这是一个解决方法:
-webkit-backface-visibility: hidden; -webkit-transform: translateX(0);
我知道这听起来像是一个黑客,但它有效......
首先,将过渡属性放在普通元素中,而不是:悬停状态.然后,如果您只需要在不透明度上进行转换,请使用:
opacity 0.2s ease-in-out 0s
这种闪烁是Webkit浏览器中的一个已知错误,当你在流体元素上设置不透明度时会发生这种情况(这里是25%).这是一个解决方法:
-webkit-backface-visibility: hidden; -webkit-transform: translateX(0);
我知道这听起来像是一个黑客,但它有效......