CODEWITHSUNDEEP
javascripthtmlcss
chooban
chooban

Reputation: 9256

CSS rotation, final frame and inline-block

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. i.e 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.

Upvotes: 2

Views: 58

Answers (1)

isherwood
isherwood

Reputation: 61063

Span elements are inline by default, and therefore have limitations on dimension, position, etc. By removing inline-block from the style display, you're allowing it to revert to inline, whereby dimension and position are stripped.

Upvotes: 2

Related Questions