Почему атрибут позиции CSS влияет на анимацию вращения?

Question

Я работаю над веб-сайтом (что я не сделал дизайн, кто-то дал мне HTML/CSS) в качестве разработчика, и у нас есть приятная анимация spinner для асинхронных загружаемых компонентов. Это вечно-вращающаяся анимация определяется этим правилом 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.

Установка абсолютного положения указывает на форматирование блока на диапазон.

Просто добавьте 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>