css - 在其他浏览器上平滑的字母间距过渡

Question

我正在使用以下内容来制作悬停过渡动画:

a {
 letter-spacing: 1px;
 transition: all .5s ease-in;
}
a {
 letter-spacing: 2px;
}

Here is a jsBin.

起初我没想到这会很漂亮，但当我看到它在 Chrome 中的动画效果如此流畅时，我感到惊喜。尽管它只改变了 1px 的间距，但不知何故 Chrome 给人一种平滑过渡的错觉。

虽然在 Safari 中它只是从 1px 跳到 2px 而没有很好的平滑效果。

有什么方法可以在 Safari 中获得相同的效果吗？

(或者，是否有一种在非 Chrome 浏览器中禁用此功能的纯 CSS 方法？)

Answer 1

我误读了 list of CSS Animated properties 中的 letter-spacing 条目.事实上，任何类型的长度单位都可以与letter-spacing 动画一起使用。看起来 Safari 不能流畅地动画 1 像素的差异 - 一个错误。

跨浏览器的小字母间距动画的解决方案是使用 em 单位和更小的 .1s 延迟以获得平滑过渡。 Safari 没有像small letter-spacing 动画那样流畅的动画，但还算过得去。

Updated example jsBin with an em unit (在 Safari、Firefox、Chrome 中测试和工作)

CSS

a {
 letter-spacing: 1px;
 transition: all .1s ease-in;
}
a:hover {
 letter-spacing: 0.2em;
}

可用的浏览器前缀(如果需要):

-webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-ms-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;