Design Lunatic

CSS3 Keyframe Animations

CSS3 keyframe animations attempt to add animation support to CSS, so that Javascript doesn’t have to be used anymore to animate elements. Unfortunately, the only desktop web browsers that can support this are webkit-based ones, and the mobile devices with support are iPhones 3.2+, and Android 2.1+.

Here’s some sample syntax:

@-webkit-keyframes 'animate' {

    0% {
      left: 100px;
    }

    40% {
      left: 150px;
    }

    60% {
      left: 200px;
    }

    100% {
      left: 250px;
    }

  }

What this does: It creates an animation with the name ‘animate’. This animation can be applied to any element you wish, more about this later. Also, the words ‘from’ and ‘to’ can be substituted for ’0%’ and ’100%’, respectively.

The animation-timing-function can be used in a keyframes rule to set the animation type of the current keyframe. For example,

@-webkit-keyframes 'diagonal-slide' {

    from {
      left: 0;
      top: 0;
    }

    to {
      left: 100px;
      top: 100px;
      -webkit-animation-timing-function: ease;
    }

  }

Will make the element ease into having a left of 100 and a top of 100. Ease is actually the default value. The animation types currently available are:
ease | linear | ease-in | ease-out | ease-in-out | steps(number)

Most of these I’m sure you understand, but the steps(number) one is slightly different. Whichever number you put into the parentheses is how many steps the keyframe has. It has the power to make the animation extremely jerky.

Now that we’ve gone over the basics, we will learn to apply this animation to an element.

div {
    -webkit-animation-name: 'diagonal-slide';
   -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 10;
  }

We’re animating all divs, and the animation keyframe we’re using is ‘diagonal-slide’. Now, the animation-duration property specifies how long each iteration of the animation will take. In this case, we have 10 iterations of it, so the total animation will last 50 seconds. Animation-iteration-count can also be set to infinite, so the animation will infinitely repeat. (What a surprise!).

The property called animation-direction specifies whether or not the animation should go backwards in alternate cycles or not. Here’s how it is used:

-webkit-animation-direction: alternate;

On every other iteration of the animation being used, the animation goes backwards.

Animation-delay tells when to begin the animation.

-webkit-animation-delay: 5s;

This will tell the animation to start 5 seconds after it normally would. This property can be set to a negative value, in which case the animation immediately jumps to the point it would have been in.

Animation has a shorthand notation, with the order being as follows:
animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction

CSS3 Animations are great when for a simple animation, and I’m sure that in the future, they will be used quite often. Right now, however, they don’t have widespread browser support. Have fun and good luck!