CSS3 Transitions, Transforms, Animation, Filters and more!

Introduction

This website is designed to help you build modern sites that are able to make use of some of the newer, exciting parts of CSS.

The site is currently focussed on CSS Transitions, Transforms and Animation, though I will be adding other topics as they become available on any major platform.

Though of course your browser must support the technologies to use them, most things degrade nicely in older browser, meaning that you can use much of this today, even without a fallback. If you need to have the same appearance in older browsers (mainly IE6, 7 and 8), then all the animation bits can be easily covered by using jQuery's .animate(). 2D transforms can be emulated to a degree in older versions of IE, but 3D transforms can't.

None of the actual animation uses javascript, though I am using jQuery to add and remove classes to add interactivity. You can use the :target pseudo selector to do this in some cases, but I'm keeping it simple and extensible here.

If you are using a touch enabled device, replace hover with touch and hold wherever appropriate. (Check the script in the head if you are wondering how to replicate that effect.)

Your Browser

Property Global Support US Support Do you have it?
CSS Transitions 34% 39%
CSS Transforms 39% 46%
CSS 3D Transforms 33% 39%
CSS Animation 34% 39%
CSS Filters 3% 5%

Data from Can I Use + Stat Counter (January 2014)


Start the tutorial!



avenue-origin