2

我无法让我的动画顺利旋转。元素完成旋转后，您可以看到文本“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); }
}
4

1 回答 1

2

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

在这里演示

编辑

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

于 2013-10-09T03:12:37.380 回答