
- Getting Started – what you must have on your workstation
- The Basics of the Basics – what you should know about transitions
- The Basics – what you must know about CSS3 Transitions (demo section)
- Conclusions – are we there yet?
- External Resources – places where you must visit after reading this article

Getting Started
To get started, you’ll need a browser that supports CSS3 Transitions:- Apple Safari (supported in Safari 3.1 and later, and in iPhone OS 2.0 and later.)
- Google Chrome
- Mozilla Firefox 3.7 alpha (also known as Minefield)
- Opera 10.5x (also supported by Opera Mobile 10 beta 2)
What about Internet Explorer?
At the moment it’s announced that Internet Explorer 9 isn’t going to support CSS3 Transitions. The best support for IE Transitions and Transformations can be achieved with Matrix Filter. Additionally, I recommend reading an article titled Cross-Browser Animated CSS Transforms — Even in IE, written by Zoltan “Du Lac” Hawryluk who is the author of cssSandpaper.
The Basics of the Basics
Unfortunately, there’s no “one rule to rule them all” for transitions. Actually every browser has their own proprietary properties. Fortunately the syntax for values are consistent.What can be transitioned?
Most properties can be transitioned and therefore I see no reason to list them here explicitly. However, there are some difference between browsers and the most obvious exception is that Firefox 3.7a doesn’t support transition of transformations at all.The property values for transitions
Transitions have four values to declare at maximum: Shorthand:-webkit-transition: property_name duration timing_function delay; -moz-transition: property_name duration timing_function delay; -o-transition: property_name duration timing_function delay; transition: property_name duration timing_function delay;You also can declare every value explicitly: (Target) Property:
-webkit-transition-property: property_name; -moz-transition-property: property_name; -o-transition-property: property_name; transition-property: property_name;Duration:
-webkit-transition-duration: duration; -moz-transition-duration: duration; -o-transition-duration: duration; transition-duration: duration;Duration (like delay) can be entered either in seconds (eg. 0.5s) or in milliseconds (eg. 500ms). It’s important to note that if the value is entered without suffix, transition will not work at all. Timing (of motion):
-webkit-transition-timing-function: timing_function; -moz-transition-timing-function: timing_function; -o-transition-timing-function: timing_function; transition-timing-function: timing_function;Available timing functions:
- cubic-bezier(cp1x, cp1y, cp2x, cp2y)
- ease – equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
- linear – equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).
- ease-in – equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
- ease-out – equivalent to cubic-bezier(0, 0, 0.58, 1.0).
- ease-in-out – equivalent to cubic-bezier(0.42, 0, 0.58, 1.0).
-webkit-transition-delay: delay; -moz-transition-delay: delay; -o-transition-delay: delay; -transition-delay: delay;Delay (like duration) can be entered either in seconds (eg. 0.5s) or in milliseconds (eg. 500ms). In general, it’s good to declare transitions on default state selectors without pseudo classes. This will cause transition played in both direction, eg. when hovering. Remember, you have to enter all the properties four times before being cross-browser compliant. Therefore it’d be best to use shorthand codes for keeping your CSS code clean.

The Basics
Now, I’m going to demonstrate some of the transitions. You must either hover or to click activation buttons for displaying transitions. All the code examples below has no browser proprietary format written – this is for saving space.Basic Transition: Dimensions and Scaling
I’ll start by demonstrating the basic transition. It also demonstrates the difference between width+height and scale transform.#widthHeight {transition:all 500ms;} #widthHeight:hover {width:200px;height:200px;line-height:200px;} #scale {transition:all 500ms;} #scale:hover {transform:scale(2.0, 2.0);}
As you can see, width and height increases normally while scaling is treated almost like absolutely positioned element. On scaling, the transform-origin is set to middle while modifying width+height origin is on the top-left corner.
Transition with Timing Function
Below there are two blocks rotating; one with linear timing-function and second one with ease.#rotateLinear {position:relative;clear:both;left:0px; transition:all 2500ms linear;} #rotateEasing {position:relative;clear:both;left:0px; transition:all 2500ms ease;} #rotateLinear:target {left:200px; transform:rotate(360deg);} #rotateEasing:target {left:200px; transform:rotate(360deg);}
As you probably noticed, the movement is different but both transitions ends at the same time (after 2500ms).
Transition with Delay
Delays are useful in some cases. And they’re very easy to implement in transitions:
#bgColorDelay {background-color:#12142B; transition:background-color 500ms linear 800ms;} #bgColorDelay:hover {background-color:#336699;}
Transition Chaining
Transitions can also be chained. This doesn’t come as a default feature, but chaining can be achieved by adding delay between transitions:
#widthHeightOpacity {transition:width 500ms, height 500ms linear 500ms, opacity 500ms linear 1000ms;} #widthHeightOpacity:hover {width:200px;height:200px;opacity:0.1;}
This has one caveat: transitions are displayed in same order no matter whether the element is hovered or it’s in default state. And that makes no sense. Therefore we need to reverse the declarations (compared to earlier examples) as following:
#widthHeightOpacity { transition:width 500ms 1000ms, height 500ms linear 500ms, opacity 500ms linear; } #widthHeightOpacity:hover {width:200px;height:200px;opacity:0.1; transition:width 500ms, height 500ms linear 500ms, opacity 500ms linear 1000ms; }
Is There Anything Else?
Well of course, there might be something else I haven’t noticed at this point. But what I’m trying to emphasize is that transitions are rather simple to implement (although they require a bit extra work for cross-browser compliancy).

Conclusions
Are we there yet? Yes, we’re over halfway there. Transitions in general are very cool in proper use. However, I’m personally still bit skeptic with CSS3 Transitions: at this point, you can’t rely on them and you must do cross-browser testing thoroughly. I’ll cover some of the problems at the following part of this article series. And I’m also going to briefly compare CSS3 Transitions with jQuery Animations. If you’re dealing with a platform solely running on WebKit (like iPhone or Adobe AIR) then go ahead and enjoy the full power of both CSS3 Transitions and WebKit animations.
External Resources
Here are some good resources provided both by browser vendors and other external authors. I strongly suggest reading them for adopting transitions and other CSS3 techniques.- Safari CSS Visual Effect Guide: Transitions
- Mozilla CSS transitions – MDC
- Opera: CSS3 Transitions support in Opera Presto 2.3
- CSS3.info
- CSS3, Please! The Cross-Browser CSS3 Rule Generator
- CSS Fundamentals: CSS 3 Transitions | NetTuts+
- CSS Transitions 101 | Webdesigner Depot
- Going Nuts with CSS Transitions | 24 ways
- Safari CSS Visual Effect Guide: Animations
Great, well-written article!
Seeing these examples inspire me to look into adding support for this inside cssSandpaper, and this article will be a very big help as a reference with its examples. If only IE supported great stuff like this natively … :-(
Pingback: [User Link:CSS3 Transitions – Are We There Yet?] | Tips for Designers and Developers | tripwire magazine
Bravo, great post!
Pingback: CSS Brigit | CSS3 Transitions – Are We There Yet?
Pingback: [Linkdump #2] CSS3 na koniec tygodnia. « Tomasz Kowalczyk
Pingback: Top Worthwhile Tutorials of the Week – #5 | AEXT.NET MAGAZINE
Pingback: RPW 26/04/10: cacher les fichiers statiques, CSS3 transition, annonce Firefox 4, jeux en JS | BrainCracking - Veille technologique sur les applications Web
Pingback: Cross-Browser CSS3 Rule Generator and Transition | DIGITALife
Pingback: 140+ Inspirational Fresh Articles for Web Designers | tripwire magazine
The link to Opera is incomplete…
Thank you for notification, now it’s fixed. I also made some other minor improvements to article.
Nice article!
Pingback: CSS3 Transitions – Are We There Yet? | samuli.hakoniemi.net « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
thx for this awsome article!
Pingback: 網站製作學習誌 » [Web] 連結分享
Pingback: [Web] 連結分享 - 傑夫碎碎唸-有線電視、漫畫、PHP、Pushmail、Blackberry
Really interesting stuff.
Scaling is *dramatic* for mi esposa’s art studio! And extremely easy to setup for “graceful degrade.” Thanks much.
thanks for sharing such nice information..
Pingback: Veckans länktips – 2010-05-02 | lillbra.se
Pingback: 14 Best Fresh CSS3 Tutorials
Pingback: 140+ Inspirational Fresh Articles for Web Designers — The Rawk Shop Literal
Pingback: Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine
Pingback: To do list – explore CSS 3 « Bloco de Notas
Pingback: More CSS3 Goodies « MEDIA SALT
Pingback: Some links for light reading (12/05/10) | Max Design
Pingback: CSS3 Transitions « Ronald Jusuf's Virtual Ramblings
Until IE actually supports this, its a no go for me. The company I work for expects all of our sites to look (for the most part) the same across all browsers. I’ll use javascript to do the basic animations until then. I still don’t know how I feel about CSS handling this kind of thing. Almost like we are using CSS to do too much. I’m sure I’ll get over that once transitions are fully supported.
Until IE actually supports this, its a no go for me. The company I work for expects all of our sites to look (for the most part) the same across all browsers. I’ll use javascript to do the basic animations until then. I still don’t know how I feel about CSS handling this kind of thing. Almost like we are using CSS to do too much. I’m sure I’ll get over that once transitions are fully supported.
+1
Pingback: CSS Three — Connecting The Dots - Smashing Magazine
The only way to force Microsoft to make IE standards compliant is to go ahead and start using CSS3. The more websites that are out there with CSS3 the better. People using IE will eventually see the a site that looks different (CSS3) to how they see it on their IE.
And the chances of them wanting to continuously see that nice fresh looking version of what they’re used to seeing are good. They’ll then look into using another browser like Chrome, Safari or Firefox. Microsoft will begin to see, what would be, a massive drop in people using their browser and make them seriously consider becoming standards compliant.
Pingback: 20 Useful CSS3 Tutorials and Resources | Template Monster Blog
Pingback: TOPGFX » Blog Archive » CSS3 Transitions Transforms & Animation : Tutorials & Examples
Pingback: Techniques and Tutorials for Using CSS3 « Arun Jacob – Web/User Interface Designer & Web Consultant
This is a great overview that includes some examples and resources! Thanks for sharing.
Brilliant article, well structured and happy about the external links as internet explorer is the bane of all evil for web designers.
Thanks
Pingback: Collection of CSS3 Tutorials – November 2010 « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
Pingback: 70 Must See CSS3 Tips, Tricks And Tutorials
Pingback: CSS3 Transitions in we design – enriching the user experience
Pingback: CSS3 Animation With jQuery Fallbacks
Pingback: CSS3 Tutorials and Resources - WebsitesMadeRight.com
thanks for sharing !
this helps me so much ! thanks again !
Sebastien
Pingback: CSS Transition Tutorials, Guides and Useful Tips | DesignFloat Blog
Hello, anyone knows if its possible to make a menu when on hover the color changes from bottom to top?
Awesome, this article helps me very much !
Thanks !
Chris
Pingback: CSS3 generators « dynamisk5
Pingback: Use css transitions make a powerful application’s animation with jquery as a fallback | JqueryHeaven