More Web Design Tutorials

CSS3 – Transitions

December 24, 2012

This is a fun little feature, just as long as you are Not trying to view it with Internet Explorer. Unfortunately, IE does not support the CSS3 transition property (yet?). I know, I was shocked, too… The other main browsers support it, but Firefox 4, Chrome, and Safari require a pre-fix:

  • Chrome – -webkit- (same as Safari)
  • Firefox 4 – -moz-
  • Opera – -o-
  • Safari – -webkit- (same as Chrome)

Firefox 4 was released in February 2010, and as I’m writing this – December 2012 – we’re on Firefox version 17, I would not worry about this old version any longer, but for those of you who want to cover all bases, add a line of -moz- to your CSS.

There are four properties related to transition:

  • property – addresses the property that is being transitioned
    • background color and position
    • border color, spacing, and width
    • clip
    • color
    • crop
    • font size and weight
    • letter and word spacing and line height
    • margin and padding
    • max and min height and width
    • opacity
    • outline color, offset, and width
    • text indent and shadow
    • vertical-align and z-index
    • visibility
  • duration – sets the amount of time, in seconds (s), the transition takes. The default is ‘0’ so without this information, the transition effect is lost.
  • timing-function – Sets the pace of the transition.
    • linear – same speed from start to finish
    • ease – slow start and finish, faster in the middle
    • ease-in – slow start, faster finish
    • ease-out – faster start, slow end
    • cubic-bezier – allows to more specifically set start and end speed of the transition by defining four values between zero and one: (.5, .8, .3, .6)
  • delay – sets when the transition starts. The default is ‘0’, which starts it immediately, delays can be set in seconds (s) or milliseconds (ms).

So, all browser-required pre-fixes aside, the basic CSS could look like this:

transition-property: width;
transition-duration: 3s;
transition-function: ease;
transition-delay: 1s;

Considering that we need 3 (or 4, if you want to cover FX4) lines for each of these properties, this could get quite cumbersome. Thank God (or whoever sets these specifications), there are shortcuts.

transition: width 3s ease 1s;

or, if considering all the browsers:

transition: width 3s linear 2s;
-moz-transition: width 3s linear 2s;
-webkit-transition: width 3s linear 2s;
-o-transition: width 3s linear 2s;

See a few examples in action HERE

If you have any questions about this tutorial or run into trouble trying it yourself, post your question/problem in the Killersites Forum for help.