Discuss: Understanding CSS3 Transitions
by Dan Cederholm
- Editorial Comments
2 Great article
Loved the article. Did a great job of making transitions easier to understand. I ordered the book and can’t wait to get my grubby mitts on it.
posted at 11:52 am on November 16, 2010 by Alex Morales
3 Nice introduction
This was a really useful introduction. I think your point about browser support is a really good one – if something is essential then don’t use CSS3, but if it just subtly enhances the browsing experience then go for it.
Another benefit of using CSS3 like this is that, over time, it will hopefully encourage less tech-savvy users to upgrade their browsers when they see how much better some sites work in modern, standards-compliant browsers.
posted at 12:03 pm on November 16, 2010 by skilldrick
4
@Christophe BENOIT: No word on transition support in IE9 Beta yet, but they recently announced support for 2D transforms, so one can be hopeful!
posted at 12:45 pm on November 16, 2010 by Dan Cederholm
5 Browser-Support
@Dan:Very nice and interesting article about CSS3 transitions. By the way it’s working pretty nice with Firefox 4.0b7.
@Christophe: At the moment there excists no transitions support at the IE9b.
All those CSS3 features like transitions, transforms and animations will be an interesting way to interact with the users, without flash.
posted at 02:11 pm on November 16, 2010 by WebstandardBlog
6 Learned something today
Great and very useful article, i have now a better understanding about CSS3 transitions.
posted at 04:22 pm on November 16, 2010 by Theo
7 Transition timing for different events
This CSS3 transition stuff looks interesting, but I find it a bit annoying how transition timing is specified. What happens if I want to animate the background property of an element on :hover and :active, but I want to use different timing for each? Say I want to have a softer transition for the :hover, but I want the :active to change near instantly? As it’s currently implemented, you can change the property value for different events, but the timing will all be the same. How can a situation like this be handled?
posted at 06:51 pm on November 16, 2010 by cklloyd
8 Nice introduction
It’s a nice introduction (though it could use a little word on how the inverted transition is supposed to work or could be changed to something different).
What I’m really missing though is a fat warning against using these types of animations for functional animations. As properties like “height” can be adapted too it’s possible to hide content with no decent graceful fallback. You could argue that we’re all professionals and should know about that stuff already, but css3(/html5/new javascript) is drawing lots and lots of new people to the job which little prior understanding of the simple 3-way separation of content – style – function.
posted at 06:10 am on November 17, 2010 by Niels Matthijs
9 Gradients?
Great peek at the new book, Dan—Can’t wait to get my copy. Congrats!
Perhaps it’s covered later in the chapter, but combining CSS3 gradients with transitions doesn’t seem to work for me, though it seems to be listed as a supported property via background-image and I’m following spec… Any expert tips on making those happen?
posted at 03:46 pm on November 19, 2010 by robalan
10 Demos?
Just curious why you have posted videos of the stuff working instead of just having a live demo? That would have made it better.
posted at 07:13 pm on November 20, 2010 by keithnorm
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)




1 What about IE ?
Transitions seems great. Will IE9 support this ?
posted at 09:31 am on November 16, 2010 by Christophe BENOIT