Bidirectional CSS Transition

Profile picture for KyleMit
KyleMit

I'm implementing the collapsing sticky header from this article on how to create an animated sticky header, with CSS3 and jQuery.

The header is currently animating all CSS changes with the following line:

<!-- language: lang-css --> 
transition: all 0.4s ease;

When the sticky header is applied the following css properties change:

<!-- language: lang-css --> 
  font-size:   72px;    /* --> 24px;    */
  line-height: 108px;   /* --> 48px;    */
  height:      108px;   /* --> 48px;    */
  background:  #335C7D; /* --> #efc47D; */
  text-align:  center;  /* --> left;    */
  padding-left: auto;   /* --> 20px;    */

So transition all should gracefully move between the existing value and new value for each of those properties.

However, I'm noticing that when I scroll down, the text nicely animates smaller and to the left. However, when I scroll up, the text seems to jump out of the middle instead of moving right when it loses the text-align:left property.

<!-- begin snippet: js hide: false --> <!-- language: lang-js --> 
$(window).scroll(function () {
  var belowTop = $(this).scrollTop() > 30;
  $('header').toggleClass('sticky', belowTop);
});
<!-- language: lang-css --> 
/*reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

header {
  position: fixed;
  width: 100%;
  font-family: 'PT Sans', sans-serif;
  transition: all 0.4s ease;
  color: #fff;

  font-size: 72px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  text-align: center;
}
header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}
<!-- language: lang-html --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header><h1>Sticky Header</h1></header>
<img src="http://i.stack.imgur.com/8pezV.jpg" alt="Big Image" />
<!-- end snippet -->

The assumption that all the properties being changed will be animated is incorrect.

Only animatable properties will be transitioned gracefully, and text-align is not animatable.

Here's a complete list of animatable properties from MDN.

Here's a simplified example that increases the animation time. It's easy to see that the animation to left align the text never occurred in the first place.

<!-- begin snippet: js hide: false --> <!-- language: lang-js --> 
$(window).scroll(function () {
  var belowTop = $(this).scrollTop() > 30;
  $('header').toggleClass('sticky', belowTop);
});
<!-- language: lang-css --> 
header {
  position: fixed;
  width: 100%;
  transition: all 2s ease;

  font-size: 32px;
  text-align: center;
}
header.sticky {
  font-size: 16px;
  text-align: left;
}
<!-- language: lang-html --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header><h1>Header</h1></header>
<img src="http://i.stack.imgur.com/8pezV.jpg" alt="Big Image" />
<!-- end snippet -->

As a workaround to animating text-align, here are a couple stack overflow threads with solutions involving other animatable properties or jQuery.