css - Firefox 3.6 上的 CSS3 Transform 稳定吗？

Question

我实现了图像的 CSS3 转换，并对其进行缩放和平移。当我将鼠标悬停在图像上进行变换时，生成的图像有时会闪烁或不显示。我必须稍微移动鼠标才能使其粘住。是我的代码有问题还是 Firefox 3.6 中的实现有问题？

html:

<a class="image-transform" href="#" title="William and Catherine"><img src="images/William_Walter_and_Catherine_Rowe.jpg" alt="William Walter and Catherine Rowe"/></a>

CSS:

.image-transform img
{
    float:right;
    width: 75px;
    background-color: #ffffff;
    margin: 1em 1em 1em 1em;
    padding: 3px;
    border: solid 1px;
    -moz-box-shadow: 5px 5px 5px #888;
    -o-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.image-transform:hover img 
{
/*  width: 300px;*/
    -moz-transform: scale(4) translate(-60px);
    -webkit-transform: scale(4) translate(-60px);
    -o-transform: scale(4) translate(-60px);
    transform: scale(4) translate(-60px);
}

此制作页面位于:http://www.amcolan.info/Rowe/rowe.php 。这是右边距上唯一的一张小照片。我在另一个页面上使用了 JavaScript 解决方案，效果很好，但我想尝试一下 CSS3。

感谢您的帮助。

Answer 1

原因其实很简单。看看这张图片:

看，当您将鼠标悬停在元素上时，:hover 选择器生效，它会展开并平移，从而远离鼠标。现在，该元素不在鼠标下方，:hover 选择器将不会生效，并且该元素会移回到鼠标下方的原始位置。然后重复该循环。

现在，Firefox 3.6 不支持 CSS 过渡，因此这种情况会立即发生，或者与浏览器重新绘制屏幕的速度一样快，因此它看起来会“闪烁”或“闪烁”。

解决方案是确保在动画的所有部分期间该元素始终位于鼠标下方，或者使用 JavaScript，您可以在其中使用事件和队列来获得对动画的更细粒度的控制。