How to Create Animations with Keyframes - dummies

How to Create Animations with Keyframes

To create animated effects on your website to display on the iPad and iPhone, you need to use keyframes. More complex CSS 3 animations rely on keyframes. Keyframes are the points within an animation where something changes. Whenever you want to change an animated object, you need to create a new keyframe.

For instance, if you want to animate a ball bouncing, as shown in this figure, you need to have a keyframe at the top of the bounce and another one at the bottom of the bounce.

The bouncing ball with portions of seconds demarked.
The bouncing ball with portions of seconds demarked.

In this example, the ball is 50 pixels in diameter and the container for the ball is 350 pixels tall. The first keyframe, therefore, places the ball at the bottom of the container, and the last one places it at the top of the container.

Here’s the code that makes this work:

@-webkit-keyframes bounce {
          from { margin: 300px auto 0;}
          to { margin: 0 auto 0;}

An @-webkit-keyframes block contains rules that define each keyframe. A keyframe defines the style for that moment within the animation. You can have a start and an end as in the example shown here, or you can define any number of points in-between. Some web browsers apply this style more smoothly than others, but Safari on the iPhone and iPad make this work quite well.

In this simple bouncing ball example, an animation called bounce is defined to have two keyframes: one for the start of the animation (the from block) and one for the end (the to block). These two keyframes move the ball from the bottom to the top.

When you define an animation with a set of keyframes, you can use the following webkit-animation properties:

  • animation-name — defines the animation used. Point it to bounce, the keyframe set defined earlier. If the name isn’t found (it’s missing or misspelled), the browser assumes the default value of none and no animation is produced:

    -webkit-animation-name: bounce;
  • animation-duration — defines the length of the animation. The time value format is a number followed by a time unit identifier. The time unit identifiers are ms for milliseconds and s for seconds (1000 ms, 1s). The animation of the bouncing ball lasts one second.

    The figure illustrates how the browser automatically creates the tweened frames — the frames between the top and bottom. You define the start and end and the browser fills in what’s “in-between.

    webkit-animation-duration: 1s;
  • animation-iteration-count — defines the number of times an animation cycle is played. The default value is 1, and that value makes the animation play from start to end once. A value of infinite causes the animation to repeat forever. As you might guess based on that information, in the following example, the animation plays ten times:

    -webkit-animation-iteration-count: 10;
  • animation-direction — defines whether the animation should play in reverse every other cycle. If alternate is specified, every other animation cycle is played in the reverse direction. When an animation is played in reverse, the timing functions are also reversed.

    This is why you need to define the ball as only bouncing up. The alternate animation is played in reverse, bringing the ball back down to the bottom of the box (not unlike gravity).

-webkit-animation-direction: alternate;

Put it all together and the style rule that makes the bouncing ball animation work looks like this:

#animationDemo #ball {
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;

When you enter one or more properties, be sure to follow this order:

  1. transition-property

  2. transition-duration

  3. transition-timing-function

  4. transition-delay

Use the following statement for the bouncing ball demonstration:

#animationDemo #ball { bounce 1s 10 alternate;}

For a complete list of CSS properties you can animate by using transitions, visit CSS Transitions Module Level 3.