css - 当在关键帧中定义高度/宽度时，CSS 动画中的旋转中断

Question

我有一个元素，我想在其中制作动画。我想分两步制作动画，首先缩放并旋转一个正方形，然后加宽正方形。我从 transform: scale(.1) rotateX(360deg); 开始，并将动画设置为 transform: none，效果很好。但是，一旦我(在任何步骤中)在关键帧中声明高度/宽度，旋转就会停止工作。它仍将按应有的比例缩放，并应用高度/宽度属性，但完全跳过旋转。

这里有一个 Codepen 来演示这个问题: http://codepen.io/anon/pen/abDCK

如您所见，其中没有旋转，只是简单地按比例缩小。现在，在 CSS 中向下滚动并注释掉高度/宽度属性，您会发现旋转现在突然起作用了。

我尝试过在普通选择器(而不是关键帧)中声明/不声明高度/宽度的不同组合，我还尝试将高度/宽度声明放在关键帧的不同步骤中。没有成功。

我在 Chrome 中的两个 Firefox 中得到了相同的结果。这是预期的行为吗？如果是这样，为什么？有任何解决方法吗？

Answer 1

与关键帧中的变换不平衡有关吗？您需要将 translateX(0deg) 添加到 40% 关键帧或 100% 关键帧，具体取决于您想要的位置。

http://codepen.io/anon/pen/lJKkD

如果有人能解释原因，我肯定会喜欢它 - 但这是“解决方案”