css - 如何修复 WebKit 中的闪烁过渡？

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 (900) 和 firefox (600) 之间已经不同的 webkit 版本移动的像素