html - 文本 "nudging"自身在 css 动画之后

Question

我在使动画平滑旋转时遇到问题。元素完成旋转后，您可以看到稍微向左的文本“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); }
}

Answer 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 上报告它。