notoriousb1t

CSS3 Transform Quickstart

Here is a quick guide to getting started with CSS animations if you have missed out like me.

This code changes the background from black to white and back:

    @keyframes pulse {
        from { background-color: rgb(0, 0, 0); }
        50% { background-color: rgb(255, 255, 255); }
        to { background-color: rgb(0, 0, 0); }
    }
    .changing-background {
        animation: pulse linear infinite 3s;
    }

That code doesn't work in my browser... Ok that was the simple version.  Here is the same thing but working for most browsers:

    @-moz-keyframes pulse {
        from { background-color: rgb(0, 0, 0); }
        50% { background-color: rgb(255, 255, 255); }
        to { background-color: rgb(0, 0, 0); }
    }
    @-webkit-keyframes pulse {
        from { background-color: rgb(0, 0, 0); }
        50% { background-color: rgb(255, 255, 255); }
        to { background-color: rgb(0, 0, 0); }
    }
    @keyframes pulse {
        from { background-color: rgb(0, 0, 0); }
        50% { background-color: rgb(255, 255, 255); }
        to { background-color: rgb(0, 0, 0); }
    }
    .changing-background {
        background-color: black;
        -moz-animation: pulse linear infinite 3s;
        -o-animation: pulse linear infinite 3s;
        -webkit-animation: pulse linear infinite 3s;
        animation: pulse linear infinite 3s;
    }

Example: What does it all mean?

  • We defined a set of keyframes named pulse.  The keyframes tell the browser what properties the element should have during each point in the animation.  The browser is smart enough to know how to "move" from one color to another on the color scale
  • We created a css class named changing-background and set the animation property to use the pulse keyframes using a linear transition between frames that cycles infinitely and plays the animation over a 3 second period of time

A quick timeline...

  • At 0.0 seconds, the color should be black
  • At 0.5 seconds the color should be a dark gray
  • At 1.0 seconds, the color should be a light gray
  • At 1.5 seconds the color should be white
  • At 2.0 seconds the color should be a light gray
  • At 2.5 seconds the color should be a dark gray
  • At 3.0 seconds the color should be white start over