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正常工作（关于旋转动画）@keyframes spinning { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } #first{ position: absolute; } #second{ position: relative; /* or don't specify it at all */ }和{ {1}}导致动画停止。

为什么CSS位置属性会影响微调器动画？

这是一个重现问题的片段：

＆＃13;

<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>

＆＃13;

String input = "!!!Error deploying file order\\POST_ORDER_UpdateTaxAmountCurrInCo.sql at 22-JUL-16 08:07:Chathura aBhanakana1!!!Error deploying file order\\POST_ORDER_";
Pattern p = Pattern.compile("(?<=\\b!!!Error deploying file\\b).*?(?=\\b!!!Error deploying file\\b)");
Matcher m = p.matcher(input);
List<String> matches = new ArrayList<String>();
while (m.find()) {
    System.out.println("A " + m.group());
}

＆＃13;

Answer 1

这是因为span默认为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>

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

1 个答案: