CSS3 – Transitions

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 transitionedbackground color and positionborder color, spacing, and widthclipcolorcropfont size and weightletter and word spacing and line heightmargin and paddingmax and min height and widthopacityoutline color, offset, and widthtext indent and shadowvertical-align and z-indexvisibilityduration – 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 finishease – slow start and finish, faster in the middleease-in – slow start, faster finishease-out – faster start, slow endcubic-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.

Tags: css3, transitions

This post was written by: Andrea Barnett

This entry was posted on Monday, December 24th, 2012 at 8:45 pm and is filed under HTML5 and CSS3, Web Design Basics. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

View the original article here