为什么CSS位置属性会影响旋转动画？

Question

作为一个开发人员，我正在开发一个网站(我没有设计，其他人给了我HTML/CSS)，我们有一个很好的异步加载组件的旋转动画。它的永久旋转动画是由这个CSS规则定义的：

animation: spinning 1s infinite linear; (它也有供应商前缀版本，但不相关)。

spinning动画定义为：

@keyframes spinning { 
    0% { transform: rotate(0); }
  100% { transform: rotate(360deg); } 
}

我们的设计器已经将一个position: absolute !important属性放到了旋转元素中。我试图在其他元素中定位它，我认为这个属性是不相关的。我一拿掉position: absolute，纺纱机就停止旋转了。当我再加一次时，纺纱机又开始旋转了。

我也尝试过其他position值，似乎absolute和fixed工作正常(关于旋转动画)，而relative和static则导致动画停止。

为什么CSS位置属性会影响旋转动画？

下面是一个再现问题的片段：

​

@keyframes spinning { 
    0% { transform: rotate(0); }
  100% { transform: rotate(360deg); } 
}
#first{
  position: absolute;
}
#second{
  position: relative; /* or don't specify it at all */
}

<div style='background:yellow;width:400px;height:100px;'>
  <span id='first' style='animation:spinning 1s infinite linear'>hello</span>
</div>
<div style='background:lime;width:400px;height:100px;'>
  <span id='second' style='animation:spinning 1s infinite linear'>hello</span>
</div>

​

Answer 1

这是因为默认情况下，span是inline-element，因此不受transforms的影响。

将位置设置为绝对将块格式传递给span。

只需添加display:inline-block

​

@keyframes spinning {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
div.one {
  background: yellow;
  width: 400px;
  height: 100px;
}
div.two {
  background: lime;
  width: 400px;
  height: 100px;
}
#first {
  position: absolute;
  animation: spinning 1s infinite linear
}
#second {
  position: relative;
  /* or don't specify it at all */
  animation: spinning 1s infinite linear;
  display: inline-block;
}

<div class="one">
  <span id='first'>hello</span>
</div>
<div class="two">
  <span id='second'>hello</span>
</div>

​