2

我正在使用以下动画悬停过渡：

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

这是一个jsBin。

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

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

有没有办法在 Safari 中获得相同的效果？

（或者，在非 Chrome 浏览器中是否有一种纯 CSS 方法来禁用它？）

4

2 回答 2

4

我误读了 CSS 动画属性列表中letter-spacing的条目。实际上，任何类型的长度单位都可以用于动画。看起来 Safari 不能平滑地为 1 个像素的差异设置动画 - 一个错误。letter-spacing

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

更新了带有 em 单元的示例 jsBin（在 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;
于 2014-08-15T22:13:59.997 回答
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 可以毫无问题地处理它，所以真的不知道您在差异方面看到了什么

于 2014-08-15T22:11:46.217 回答