CSS 旋转、最终帧和内联块

Question

I've recently been experimenting with CSS animations and have come across some behaviour I can't explain with regards to final frame state.

Given this very small piece of HTML:

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

Some 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); }
}

And a little bit of Javascript to tie it together:

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)
  }
});

(For a live example, this is also in a codepen )

If you click on the text it'll rotate, click on it again and it'll rotate back. However, if you remove the display style from rotateme element then the final frame of the animation isn't preserved. For the clockwise motion this means it snaps back to the original, horizontal position, and the anticlockwise motion starts from the wrong place.

My question is, what is that inline-block is doing in this situation that makes the animation work as I expect it to. ie Stay in what I understand to be the forward fill mode.

I should add that I'm doing this in Chrome 43 just in case it's a browser quirk.

Answer 1

Span 元素默认是内联的，因此在尺寸、位置等方面有限制。通过从样式显示中删除inline-block ，您允许它恢复为内联，从而去除尺寸和位置。