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.