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

在css动画之后发短信“轻推”自己

1 个答案: