CSS位置属性がローテーションアニメーションに影響するのはなぜですか？

Question

私は開発者としてがデザインではなく、他の誰かが私にHTML/CSSを渡してくれました。私たちは非同期ローディングコンポーネント用のすばらしいスピナーアニメーションを持っています。永遠に回転するアニメーションは、このCSSルールで定義されています。

animation: spinning 1s infinite linear;（ベンダープレフィックスのバージョンもありますが、それは無関係です）当社のデザイナーが回転要素にposition: absolute !important属性を入れている

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

：

spinningアニメーションは、以下のように定義されます。私は他の要素の中に配置しようとしていましたが、その属性は無関係であると考えました。 position: absoluteを削除すると、スピナーの回転が停止しました。私はもう一度それを追加すると、スピナーは再び回転を開始した。私も他のposition値を試してみた

、アニメーションを停止させるstaticrelativeながら（スピニングアニメーションに関しては）absoluteとfixedは大丈夫働いているようだと。

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に影響されないためです。

位置を絶対に設定すると、スパンにブロックフォーマットが適用されます。

だけdisplay:inline-blockを追加：relative`in：

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