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][1].

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.





    $(window).scroll(function () {
      var belowTop = $(this).scrollTop() > 30;
      $('header').toggleClass('sticky', belowTop);
    });



    header {
      position: fixed;
      width: 100%;
      transition: all 2s ease;

      font-size: 32px;
      text-align: center;
    }
    header.sticky {
      font-size: 16px;
      text-align: left;
    }



    <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" />



As a workaround to animating text-align, here are a couple stack overflow threads with solutions involving other animatable properties or jQuery.

* [CSS3 - animate text align left/center/right][2]
* [Is it possible to transition text-alignment using CSS3 only?][3]
* [Animate text alignment using jquery][4]
* [How to use jquery .animate() to mock 'text-align:right'][5]


[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
[2]: https://stackoverflow.com/q/22923524/1366033
[3]: https://stackoverflow.com/q/18235764/1366033
[4]: https://stackoverflow.com/q/6173327/1366033
[5]: https://stackoverflow.com/q/9827365/1366033

I'm implementing the collapsing sticky header from this article on [how to create an animated sticky header, with CSS3 and jQuery][1].

The header is currently animating all CSS changes with the following line:



    transition: all 0.4s ease;

When the sticky header is applied the following css properties change:



      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.





    $(window).scroll(function () {
      var belowTop = $(this).scrollTop() > 30;
      $('header').toggleClass('sticky', belowTop);
    });



    /*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;
    }



    <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" />





  [1]: http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/