Question

我正在尝试使用CSS3过渡创建选定或悬停菜单效果。我是通过同时动画border-left-width和padding-left来做到这一点的。边界增加了6px，填充减少了6px，速度均为.3s。

在Chrome中，两者都以相同的速度制作动画并且看起来很流畅。在IE中，转换是即时的（显然没有转换/动画），并且看起来很好。在Firefox中，边框和填充是同时动画，但它出现在不同的间隔或某些东西上，使文本和容器反弹并看起来很紧张。

这是一个小提琴示例：http://jsfiddle.net/crisp330/w7phH/1/（请参阅FF和Chrome之间的区别？）

有没有让FireFox像Chrome一样顺畅地制作动画？我知道我可以使用替代方法，例如在LI中定位另一个元素并为其设置动画......但这种方法是sooo cleannnn！

这是CSS3过渡的主要内容（参见jsFiddle的工作示例）：

ul li {
    padding-left: 12px;
    border: 0 none;
}

ul li:hover {
    padding-left: 6px;
    border-left: 6px solid #d17519;
    transition: border-left-width .3s, padding-left .3s;
    -moz-transition: border-left-width .3s, padding-left .3s;
    -webkit-transition: border-left-width .3s, padding-left .3s;
    -o-transition: border-left-width .3s, padding-left .3s;
}

Answer 1

你真正的问题是Firefox允许非整数像素填充值，但只允许整数设备像素边界值（因为事实证明网页依赖于边界是整数宽度）。 Chrome强制两者都是整数个像素，所以事情就好了。目前。直到他们开始做子像素填充。但是在Firefox中，只要边界从一个小半整数变为一个半整数以上，就会得到1-device-px反弹。

不幸的是，这里确实没有很好的解决方案。有关WebKit方法导致的问题的描述，请参阅http://robert.ocallahan.org/2008/01/subpixel-layout-and-rendering_22.html。

Answer 2

显然，它周围有一个hack，它为firefox增加了一些旋转。但是，此解决方案会在最终输出中产生轻微的旋转，但会提供平滑的过渡。

ul li:hover {
    -moz-transform: rotate(0.02deg);
}

溶液取自this website

FireFox中的同步CSS3过渡并不顺畅

2 个答案: