Using CSS3 Transitions, Transforms and Animation

Demo 4 - More than just fades

This technique isn't limited to just fades, you can animate almost every property. Here are a couple of examples.

Zooming in and out

Hover on the image

Rotation

Hover on the image

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