Simple CSS Transitions

One of my coding heros, Christian Heilmann, recently wrote a new article on Smashing Magazine. The article is a pretty good tutorial for event-driven JavaScript. However, in true-to-myself fashion, I have completely missed the point of that article and noticed one minor thing that Chris did that I think is incredibly cool. Check out his smooth class:

.smooth {
    -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
        -ms-transition: 0.5s;
         -o-transition: 0.5s;
            transition: 0.5s;
}

The reason I think this is cool is because of an apparently little-known trick that CSS uses. You see, the transition property doesn’t really exist, it’s shorthand for transition-property, transition-duration, transition-timing-function (because “transition-easing” just wasn’t enough typing) and transition-delay. The trick is that any property that isn’t explicitly defined is implicitly set to it’s default. This can cause newcomers to CSS to become confused (and front-end team leaders to become angry) if the defaults aren’t understood at the time of coding, so I’ve put together a table to show the defaults for the transition properties:

Default settings for CSS transition rules, taken from Mozilla Developer Network
Property Default value
transition-property all
transition-duration 0s
transition-timing-function ease
transition-delay 0s

The default that makes this the most interesting to me is transition-property‘s default value: all (or at least, all the animatable properties, which seems to be an ever-changing list as browser developers work out out to transition a new property so I won’t put them here). It means that CSS will transition any new rule that it can; or, put another way, you now have the ability to turn animations on and off by simply manipulating a class and your CSS doesn’t end up being littered with transition rules.

To give you an idea of how this can be used, I’ve put together a fiddle doing exactly that:

Personally, I love the idea of this. It means that I can separate my end points from my transitional code. To me, that’s useful and rather cool – I can disable animations at the touch of a button, stream-line my style sheet and consolidate my animation (after all, I could add a transition-timing-funtion to that short-hand).

Thanks for that, Chris!

3 thoughts on “Simple CSS Transitions

  1. Haha get in.
    I gather this is what we were talking about the other day?

    I’m still yet to read the original piece (shall go do that now) but it’s good to see more takes on it.

    Good stuff!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>