Understanding CSS3 Transitions

by Dan Cederholm

24 Reader Comments

Back to the Article
  1. Transitions seems great. Will IE9 support this ?
    Copy & paste the code below to embed this comment.
  2. 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.
    Copy & paste the code below to embed this comment.
  3. 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.
    Copy & paste the code below to embed this comment.
  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!
    Copy & paste the code below to embed this comment.
  5. @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.
    Copy & paste the code below to embed this comment.
  6. Great and very useful article, i have now a better understanding about CSS3 transitions.
    Copy & paste the code below to embed this comment.
  7. 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?
    Copy & paste the code below to embed this comment.
  8. 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.
    Copy & paste the code below to embed this comment.
  9. 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?
    Copy & paste the code below to embed this comment.
  10. Just curious why you have posted videos of the stuff working instead of just having a live demo? That would have made it better.
    Copy & paste the code below to embed this comment.
  11. I recently tried to animate a sprite of 3 states and the animation was not smooth, actually a little jumpy beetween the state changes. Maybe I didn’t do it right or the transition between images is not done yet? I ended up doing it with jquery.
    Copy & paste the code below to embed this comment.
  12. Transitions on hovers are sweet and add that little extra to web designs. It’s a shame that IE still won’t add these features. Every client I’ve shown a site to in Chrome or Firefox that I’ve designed using transitions always wonder why it won’t show in their browser which is usually IE. Then you have to explain to them why it won’t work in IE which leads to the inevitable question about making it work in IE.
    Copy & paste the code below to embed this comment.
  13. Just wondering if there was a browser matrix for the compatibility of this demo. I understand that this article helps explains the theory, but as far as testing goes, I only got it working in OS X Chrome 7.0, but NOT in OS X Opera 10.63 (10.5 was mentioned as having support)
    Copy & paste the code below to embed this comment.
  14. This is the first time that I’ve looked at CSS3 Transitions, and luckily the demo was very well explained and the concept was kept simple. But having looked at the structure of how transitions are defined, I’m a little perplexed; Why do you give the transition property(s) to the element, and not the element :hover or the element :focus? Surely it makes more sense to be; a { color: black; }
    a:hover { -webkit-transition: color 3s ease; color: red; } Which would then enable you to specify other rules, like :focus, to use a different transition. Am I off the mark here, or does anyone share my opinion?
    Copy & paste the code below to embed this comment.
  15. There is a “wonderful chart of timing functions created by Peter Beverloo”:http://peter.sh/2010/09/last-week-asynchronous-script-execution-and-gpu-acceleration-by-default/.
    Copy & paste the code below to embed this comment.
  16. Opera 11.0/Windows will not apply any transitions to an element, if the shorthand CSS is used. So this example will not work in Opera: -o-transition: background 0.3s ease; And this one will work: -o-transition: background-color 0.3s ease; (As far as I know, a bug was filed, hopefully one of the 11.x dot releases of Opera will have this fixed…) I think it would be good to mention this in the article, since many people perhaps tried the examples right away and may have found that they are not working in Opera. (I was trying to understand why the CSS3 transitions don’t work for quite a while, before a friend of mine mentioned to me this obscure shorthand bug…)
    Copy & paste the code below to embed this comment.
  17. Michel, this article is published Nov 16 and Opera 11 was released a month later - Dec 16: http://www.opera.com/docs/changelogs/windows/
    Copy & paste the code below to embed this comment.
  18. @Gonzo: True, but Opera 10.6 (which is much older than version 11) shows the same bug as Opera 11.0—as far as I am able to tell, at least, since I tested both on Opera 10.6 and 11.0. :)
    Copy & paste the code below to embed this comment.
  19. Thanks so much for this post. It was a really cool introduction to CSS3 transitions. This is actually the first tutorial article I’ve read about them. Really helpful thanks.
    Copy & paste the code below to embed this comment.
  20. For all interested, the article didn’t mention one of the chief use-cases for transitions - on devices such as the iPhone/iPad, they’re hardware-accelerated, and as a result much more efficient than using single-threaded Javascript to handle animation timing.
    Copy & paste the code below to embed this comment.
  21. Strange, i’m trying your example of the background transition and it doesn’t seem to work on Firefox 3.6.13 or Opera 11, only works on Chrome. a.foo {
      padding: 5px 10px;
      background: #9c3;
      -webkit-transition-property: background;
      -webkit-transition-duration: 0.5s;
      -webkit-transition-timing-function: ease;
      -moz-transition: background 0.3s ease;
      -o-transition: background 0.3s ease;
      transition: background 0.3s ease;
    }
    Copy & paste the code below to embed this comment.
  22. Agreed.
    Using Firefox 3.6.3. I am also unable to get the transition to work. Fails on IE v8.0 too.
    I made the duration 20 seconds in the hope of seeing some difference and -color to each of the attributes but still no go!? a.foo
    {
      padding: 5px 10px;
      background-color: #9c3;
      -webkit-transition: background-color 20.0s ease;
      -moz-transition: background-color 20.0s ease;
      -o-transition: background-color 20.0s ease;
      transition: background-color 20.0s ease;
    }
    Copy & paste the code below to embed this comment.
  23. Yay! Just installed mozilla v4.0 and that fixed the problem. When will IE catch up?
    Copy & paste the code below to embed this comment.
  24. Very easy to learn and understand… Thanks Dan…
    Copy & paste the code below to embed this comment.