Question

我写了一个纯CSS3幻灯片，这里是http://jsfiddle.net/chinhvotrung/JQTf4/15/。

但是，我无法修复因悬停此问题而发生的闪烁错误。我曾经为我的所有选择器使用背面可见性，但它对我不起作用。请帮帮我

div.items > div.my-img > img{ /*Flicker occur by this....*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease; }

div.items > div.my-img:hover img{ /*And this....*/
cursor: pointer;
transform:scale(1.5);
-ms-transform:scale(1.5);
-moz-transform:scale(1.5); 
-webkit-transform:scale(1.5); 
-o-transform:scale(1.5);
opacity:0.3; }

Answer 1

在我的设置中，闪烁来自左侧属性上的动画，而非规模和不透明度上的动画。

我已经改变了

@-webkit-keyframes myExample {
    0% { -webkit-transform: translateX(0px); }
    50% { -webkit-transform: translateX(-900px); }
    100% { -webkit-transform: translateX(0px); }
}
@-moz-keyframes myExample {
    0% { left: 0; }
    50% { left: -600px; }
    100% { left: 0; }
}

而且，至少对我来说，它运作正常

updated fiddle

在webkit版本中移动的像素，webkit（900）和firefox（600）之间已经有所不同

如何修复WebKit中的闪烁转换？

1 个答案: