Warum beeinflusst das CSS-Positionsattribut eine Rotationsanimation?

Question

Ich arbeite an einer Website (die ich tat nicht Design, jemand anderes gab mir die HTML/CSS) als Entwickler und wir haben eine nette Spinner Animation für asynchrone Ladekomponenten. Es ist für immer Spinnen Animation ist definiert durch diese CSS-Regel:

animation: spinning 1s infinite linear; (es hat auch Hersteller-Prefix-Versionen, aber es ist irrelevant).

Die spinning Animation ist wie folgt definiert:

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

hat unser Designer ein position: absolute !important Attribut in das Spinnelement setzen. Ich habe versucht, es in einem anderen Element zu positionieren, und ich dachte, dieses Attribut sei irrelevant. Sobald ich position: absolute entfernte, hörte der Spinner auf zu drehen. Als ich es erneut hinzufügte, begann Spinner erneut zu drehen.

Ich habe position Werte auch andere versucht, scheint es, dass absolute und fixed arbeiten in Ordnung (in Bezug auf Animation Spinnen), während relative und static Ursache der Animation zu stoppen.

Warum würde das CSS-Positionsattribut eine Spinneranimation beeinflussen?

Hier ist ein Ausschnitt reproduzieren das Problem:

@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

Es ist, weil ein span ein inline-element ist standardmäßig und so ist nicht betroffen von transforms.

Wenn Sie die Position auf absolut festlegen, wird dem Bereich eine Blockformatierung zugewiesen.

Fügen Sie einfach 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>