css动画后文本“轻推”自身

Posted 2023-03-06

【中文标题】css动画后文本“轻推”自身

【英文标题】：Text "nudging" itself after css animation

【发布时间】：2013-10-16 05:23:00

【问题描述】：

我无法让动画顺利旋转。元素完成旋转后，您可以看到文本“pop”略微向左。根据字体大小，这可能会发生也可能不会发生，但我希望找到一种方法来解决这个问题而不必设置确切的字体大小（因为后备字体的大小不同并且会有同样的问题）。这也取决于浏览器，在 Chrome 中看起来不错，但在 FireFox 中您可以清楚地看到这一点。

在 FireFox 中试试这个：http://jsfiddle.net/SGVNr/ 你能看到文本向左轻推（在底部框上）吗？

div 
    height: 100px;
    width: 100px;
    margin: 30px;
    background: blue;
    font: 29px/100px Arial, sans-serif;
    color: #fff;
    text-align: center;


#good 
    font-size: 30px;


div:hover 
    -webkit-animation: move 0.7s ease-out forwards;
    -moz-animation: move 0.7s ease-out forwards;
    animation: move 0.7s ease-out forwards;


@-webkit-keyframes move 
    0%  -webkit-transform: rotate(0deg); 
    100%  -webkit-transform: rotate(90deg); 


@-moz-keyframes move 
    0%  -moz-transform: rotate(0deg); 
    100%  -moz-transform: rotate(90deg); 


@keyframes move 
    0%  transform: rotate(0deg); 
    100%  transform: rotate(90deg); 

【参考方案1】：

如果您从顶部删除 ID 并将其放在底部，则可以解决问题。因此，给这两个元素font-size:30px 使用一个可以解决您问题的类

Demo Here

编辑

经过一番调查和测试，我发现 21、22、25、27、30、33、34、36、39、41、43 和 45px 字体大小（我只测试了 20-45px）一切都按照您的意愿工作，旋转后没有任何跳跃。无论我在样式中添加/删除了哪些其他属性，这种行为都是正确的。这向我暗示这是由于 Firefox 出现了一些奇怪的渲染问题您可以在the Firefox forums

上报告它

【讨论】：

我在更改字体大小和行高后仍然遇到问题，即使字体大小大于原始 div 的大小。

试试这个例如：jsfiddle.net/SGVNr/2 对于某些字体大小，它适用于某些它不。

有趣，我仍然看到文本轻推。我在 FireFox 24 上。

我还没有彻底测试过这个，但我相信我通过将filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 添加到旋转元素中找到了解决方案。 jsfiddle.net/SGVNr/3。注意：如果元素没有旋转，过滤器会模糊文本，但这应该很容易解决，只需在旋转时应用过滤器。这是过滤器之前的另一个示例：jsfiddle.net/42y89 之后：jsfiddle.net/42y89/2

不知何故 filter: blur(0); 也可以，在 this answer 找到它