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没有为小型 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;

Answer 2

要禁用它，请使用以下代码：

@media screen and (-webkit-min-device-pixel-ratio:0) {
a {
letter-spacing: 1px;
transition: all .5s ease-in;
}
a {
letter-spacing: 2px;
}
}

这将禁用任何非webkit浏览器中的代码（因此，只能在Chrome和Safari中使用）。除此之外，你的代码运行良好，Webkit只有更好的平滑引擎，没有别的，但Firefox和IE处理它没有问题，所以真的不知道你在差异方面看到了什么

在其他浏览器上平滑字母间距转换

2 个答案: