Steve Fenton

A Great General CSS3 Transition Rule

As a follow up to my article on CSS3 Multiple Transitions, I thought I would supply a really simple code sample that you can use to unleash the funk of CSS3 on your website.

Remember, it doesn’t matter what browser support is for CSS 3 transitions, because it just means that things won’t animate if the transition isn’t supported – the change will still happen, but it will be abrupt rather than smooth.

So here is the “general all round winner” of CSS3 transitions – it essentially says “just animate everything for me on this element”…

-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;