firefox - FireFox 中的同步 CSS3 过渡不流畅

Question

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

在 Chrome 中，两者的动画速度相同并且看起来很流畅。在 IE 中，过渡是即时的(显然没有过渡/动画)，而且看起来不错。在 Firefox 中，边框和内边距是同时动画的，但它们出现在不同的时间间隔或其他东西上，使文本和容器四处弹跳，看起来很不稳定。

这是一个 fiddle 示例:http://jsfiddle.net/crisp330/w7phH/1/ (看到 FF 和 Chrome 之间的区别了吗？)

有没有办法让 FireFox 像 Chrome 一样流畅地制作动画？我知道我可以使用替代方法，例如在 LI 中定位另一个元素并为其设置动画……但这种方法太干净了!

这是 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 添加一些旋转。然而，此解决方案在最终输出中提供了轻微的旋转，但提供了平滑的过渡。

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

解决方案取自 this website