Going Nuts with CSS Transitions

34 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Kenneth Henley

    Hi Nat,

    Thanx muchly for your great article. I have just started playing with CSS3 to see how much of it will do my websites good.

    I have been experimenting with your code for a few days now. It is such a pity that one company is showing us such a CSS3 foot-dragging exercise, thus holding up the whole show.

    Regards to you in the UK from me in Germany (expat) KenHen

  2. Ryan Seddon

    FYI box-shadow has been removed from the CSS3 spec, http://www.w3.org/TR/css3-background/#the-box-shadow, for further discussion and most likely won’t make it back in. We are more likely see a new property like drop-shadow, http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html, replace box-shadow. But of course it’s all still in discussion.

    Also Firefox 3.7 (Minefield) also has support for transitions through -moz-transition. Since transitions are a working draft probably would be wise to declare it like you have for box-shadow.

  3. Yaili

    I love how easy it is to add such fun effects to our projects now—thanks for this great example!

    One question though: what do you think about the use of box-shadow since it’s been removed from the CSS3 specs? I felt it was a great property that saved us a lot of work, but it’s true that the specs were a bit blurry (the way it handles overflowing, etc).

  4. prisca

    another excellent article ~ been trying to find some time and a suitable project to play with these for a while now…
    Touches like these will just add that certain extra :-) even if a little limited for now….

    Thanks for the demos and links, Natalie :)
    (also looks like you and Simon had a great time in NZ :-)

  5. Marc Harter

    Last time I tested Firefox 3.7 (Minefield), -moz-transition didn’t support animating -moz-transform property.. hopefully that’ll get in there.

    Great article!

  6. Richard Stephenson

    Nice article Nat! I was playing around with something similar a while ago. Add a bit of jQuery in and you can have lots of fun with animation to really throw the images and a bit of drag & drop goodness to attemt to improve the usability :) Might finish it off and write it up sometime…

  7. Andrew Phillipo

    I am loving CSS animations in safari and hope they make it to other browsers soon. The only problem I see is that the redraw speed can sometimes cause some pretty weird flickering which I really dislike.

    Hopefully these things will get ironed out soon because these features are really nice.

    Great article.

  8. Chris Heilmann

    Thank you, thank you, thank you for also caring about keyboard users! I’ve seen so many tutorials on awesome CSS transitions that forgot basic usability. It can be done right.

  9. Alistair Hann

    Some very cool tricks and nice clean mark-up. Looking forward to trying them out.

    I also really like the design / layout of these 24 ways pages, but scrolling them up and down in Chrome makes an extraordinary demand on the CPU. At first I thought it was the transitions, but having run a few experiments, it is a site-wide issue. Try it out…

  10. dougwig

    Nice use cases!

    Regarding this point:

    “IE6 doesn’t handle multiple classes” the nit-picky ( but important ) clarification is that IE6 will not always CASCADE correctly with multiple class selectors if the secondary selectors are shared across multiple contexts.

    While shirt.big and shoe.big would be problematic, classes shirt.bigShirt and shoe.bigShoe would work fine in IE6.

    IE6 just applies multiple class rules individually ( shirt & bigShirt ) without regard to any multi-class context.

  11. Andy Walpole

    I tried rotation a few weeks back but it looks absolutely awful in both Chrome and Firefox. The text was so jagged it was barely legible. Not for me until the browser performance improves.

  12. Alan Switzer

    My favorite 24 Ways entry of 2009 thus far!

    I’m adding part of this technique to my online holiday newsletter – it will definitely impress the friends and family… at least the one’s on modern, standards based browsers!

    Thanks for the knowledge!

  13. Josh Nielsen

    Yeah, I see a noticeable degradation in the image quality when you rotate it. None the less it is a cleaner more dynamic method then using photoshop. I have now implemented it in my site. You can also get rotation in ie with :

    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    but I don’t think you can get all angles only 0, 90, 180, 270.
    check Snook.ca for more.

  14. Jenna

    @dougwig – shirt.big and shoe.big would work fine in IE6 if you styled an element inside them instead e.g. “shirt.big span” and “shoe.big span” would style the spans as expected.

    I wrote a blog post about this many moons ago:

    The #id.class selector in IE6

    Although it talks about using an ID and a class, the same applies for multiple classes.

    P.S. Great article! =)

  15. Joe Ally

    You actually can do rotation in IE6+. The implementation transforms an object using a matrix, and if you can remember your maths lessons you can do far more than just rotate.

    here is the link. http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx

  16. Drew McLellan

    @Luke – this complies with web standards. The experimental browser features are implemented using -moz and -webkit prefixes, as per the spec, so that they are silently discarded by older browsers without causing harm.

  17. Eugenio Grigolon

    I found very interesting the way CSS handles rotation and transitions. It’s now possible to save a lot of effort with Javascript codes and files.

    Great article describing this new feature. Thanks!

  18. Les

    I am all for box shadows, better floats, etc but animation from CSS?

    That is going too far IMHO as that is [now] moving into the realm of Javascript; that separation is looking very blurry and if it [WebKit] continues down that road then I for one will not be using any browser based off the back of it.

    Lets keep the technologies separate okay?

    Just because you can doesn’t mean to say that you should – try to imagine the fun those at Microsoft will have trying to implement those features, then try to imagine the bugs we would have and the hacks and work arounds.

    The grass ain’t always greener on the other side.

  19. Tom

    Wouldn’t your technique work a little more universally if you set the width property of the .polaroid class to auto, or didn’t set it at all?

    I’m just thinking the polaroid container could then apply well to images of any width.

  20. Simon

    Thanks for the article, I have been using css based galleries for many years, I love this type of demo as it shows the way forward.

    I will have to try this on my own website soon.

  21. David Goss

    After first reading this I was also concerned about these methods infringeing on JavaScript territory, but having thought it through I think this is the right direction.

    The transitions are living up to their name – giving a visual effect to a transition between states e.g. :hover. For me, this still comes under the umbrella of presentation rather than behaviour. Transitions don’t manipulate the DOM which is what JavaScript is really all about. It’s fine.

    I particularly like the idea of applying transitions to :focus as well as :hover so that keyboard users get some nice visual feedback as they tab through the document.

  22. Josh

    This is a good one. I saw something similar to this awhile back over on CSS tricks and liked it so much that I made it into a WordPress plugin to get photos from flickr.

  23. Andrey Petrov

    Great article and good somewhat useful examples!

    Just one note: as many mentioned already you have missed Firefox 3.7 which started supporting transitions.
    Since this is experimental stuff it would be better to include as many browsers as possible to experiment. So browser developers can use your examples as additional test cases and in a couple months or so your examples will work in more browsers (Firefox 3.7, Opera 10 Mobile and Opera 11).
    Here is CSS specs that supported by Opera: http://www.opera.com/docs/specs/presto23/#css They use o prefix.

    BTW, I also recently went nuts with CSS3 transformations :-) Comments are welcome.

  24. Mike Haydon

    Really like your creative application of CSS. It’s people like you that make this online space a more beautiful place. I especially love the first example. So easy and so effective! I’m going to say goodbye to the boring straight up and down pictures. Time to jazz things up. Thanks.

Impress us

Be friendly / use Textile