Using CSS3 Transitions, Transforms and Animation

Notes on browser support

Everything here has been available in at least one browser since 2008. Firefox and Opera have only added support in 2010, hence the reason this technology is becoming more mainstream.

Transitions and 3D transforms were added in IE10, while 2D transforms are available in IE9.

CSS Transitions

First introduced

  • Safari 3.2: 13/11/2008
  • Firefox 4.0: Late 2010
  • Chrome 1.0: 02/09/2008
  • Opera 10.5: 02/03/2010
  • Internet Explorer 10: 09/2011

CSS 2D Transformations

First introduced

  • Safari 3.2: 13/11/2008
  • Firefox 3.5: 30/06/2009
  • Chrome 1.0: 02/09/2008
  • Opera 10.5: 02/03/2010
  • Internet Explorer 9: 09/2010

CSS Animations

First introduced

  • Safari 4.0: 11/06/2008
  • Chrome 1.0: 02/09/2008
  • Firefox 5: 20/04/2011
  • IE 10: 09/2011

CSS 3D Transformations

First introduced

  • Safari 4.0: 11/06/2008
  • Chrome: 28/08/2010
  • IE 10: 09/2011
  • Firefox: 27/10/2011

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

Contents

The whole thing on one page
  1. How to use transitions
  2. How to use transforms
  3. How to use animations
  4. Cross fading images
    1. On hover
    2. On button press
    3. With timer
    4. More than just fades
    5. Animating the background-image property
  5. Sliding content
    1. Sliding by transitions
    2. Sliding by transitions + translations
  6. 3D Flipping content
  7. Animated Accordions
  8. Notes on browser support
  9. How will it look in legacy browsers?
  10. Further Reading
Fork me on GitHub