Вращение CSS, окончательный кадр и встроенный блок

Question

Я недавно экспериментировал с анимацией CSS и сталкивался с каким-то поведением, которое я не могу объяснить в отношении состояния конечного кадра.

Учитывая это очень маленький кусочек HTML:

<span id="rotateme">This is text</span> 

Некоторые CSS:

#rotateme { display: inline-block; } 
.clockwise { 
    animation: clockwise 1s; 
    animation-fill-mode: forwards; 
} 
.anticlockwise { 
    animation: anticlockwise 1s; 
    animation-fill-mode: forwards; 
} 
@keyframes anticlockwise { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(-90deg); } 
} 
@keyframes clockwise { 
    from { transform: rotate(-90deg); } 
    to { transform: rotate(0deg); } 
} 

И немного Javascript, чтобы связать вместе:

document.addEventListener("DOMContentLoaded", function(event) { 
    d3.select('#rotateme') 
    .on('click', rotateAnticlockwise) 

    function rotateClockwise() { 
    d3 
     .select(this) 
     .classed('clockwise', true) 
     .classed('anticlockwise', false) 
     .on('click', rotateAnticlockwise) 
    } 

    function rotateAnticlockwise() { 
    d3 
     .select(this) 
     .classed('clockwise', false) 
     .classed('anticlockwise', true) 
     .on('click', rotateClockwise) 
    } 
}); 

(Для пример живого, это также находится в codepen)

Если вы нажмете на текст, он будет вращаться, нажмите на него снова, и он повернуть обратно. Однако, если вы удалите стиль display от rotateme, то последний кадр анимации не сохранится. Для движения по часовой стрелке это означает, что он возвращается назад в исходное горизонтальное положение, а движение против часовой стрелки начинается с неправильного места.

Мой вопрос в том, что это inline-block делает в этой ситуации, что делает анимацию работать так, как я ожидаю. Я остаюсь в том, что, как я понимаю, является режимом прямого заполнения.

Я должен добавить, что я делаю это в Chrome 43, на всякий случай, это причуда браузера.

Answer 1

Элементы Span являются встроенными по умолчанию и поэтому имеют ограничения по размеру, положению и т. Д. Удаляяиз дисплея стиля, вы позволяете ему возвращаться к встроенному, в результате чего размер и положение лишаются.