html - CSS 动画后的文本 "nudging"本身

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