为什么 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); } 
}

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

Answer 1

这是因为 a默认span是 an inline-element，因此不受 影响transforms。

将位置设置为绝对会为跨度赋予块格式。

只需添加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>