Keyframes in action

So far we’ve been introduced to the animation properties, and had a chance to see how it relies on keyframes. Next we’ll cover keyframes in greater detail.

Things to look out for

There are a couple of things about keyframes I’d like to cover before getting into a practical example. The first is an alternate syntax you may see, using the keywords from and to.

  1. @keyframes name {
  2.   from {
  3.     ...
  4.   }
  5.   to {
  6.     ...
  7.   }
  8. }

While this is simple an alternate way of writing 0% and 100%, it can be simpler to understand and useful for simple animations.

You may have noticed that sometimes more than one percentage value is used on the same line. This is a way to have the animation pause for a while, or hold a particular state.

For example:

  1. @keyframes name {
  2.   0%, 20% {
  3.     opacity: 0;
  4.   }
  5.   100% {
  6.     opacity: 1;
  7.   }
  8. }

This example will have the element start with an opacity of 0, and stay invisible until 20% through the animation, at which time it will then begin to animate toward an opacity of 1.

We’ll make use of this tomorrow when we have multiple animations we want to stay in sync with each other.

Example: Save button wiggle effect

Remember the “Save” button example from back in chapter 1? Let’s revisit that example and look at how keyframes are used along with the animation property to create the effect.

Source: http://codepen.io/donovanh/pen/KwEQdQ

Before adding any animation I added some basic styles to a button to make it look like CodePen’s. An orange border at the top, dark gradient and white text. I’m using absolute positioning in the demo to make sure the button is in the middle of the screen.

The first thing I generally do is apply an animation property to the element. Like so:

  1. button {
  2.   animation: wiggle 2s linear infinite;
  3. }

In this case we’re applying a set of keyframes called “wiggle”, and the animation runs for two seconds with the “linear” timing function. There’s also a new attribute here, infinite.

The “infinite” value here is for the property animation-iteration-count. We can have animation repeat a set number of times, and by default they repeat once. In this case it’ll repeat an infinite number of times.

Next, we plan out what these keyframes are for the “wiggle” animation. Here’s the result:

  1. @keyframes wiggle {
  2.   0%, 7% {
  3.     transform: rotateZ(0);
  4.   }
  5.   15% {
  6.     transform: rotateZ(-15deg);
  7.   }
  8.   20% {
  9.     transform: rotateZ(10deg);
  10.   }
  11.   25% {
  12.     transform: rotateZ(-10deg);
  13.   }
  14.   30% {
  15.     transform: rotateZ(6deg);
  16.   }
  17.   35% {
  18.     transform: rotateZ(-4deg);
  19.   }
  20.   40%, 100% {
  21.     transform: rotateZ(0);
  22.   }
  23. }

What we have here is a series of waypoints for the browser to animate between. Each one rotates the “Save” button on the z-axis. The angles start bigger and get smaller over the course of the animation.

Here’s how the animation tilts the button back and forth over time:

Source: http://codepen.io/donovanh/pen/pvXJqp

We can see that the browser creates the in-between steps between each keyframe. Without relying on fancy timing functions, this animation manages to add a lot of character to the button.

Here’s a CodePen showing the Save button wiggle in action.

Homework

I’ve created a new CodePen with a single animated element. It makes use of an “animation-timing-function” within the keyframes and has a series of keyframes creating a relatively complex animation.

What happens when you take some frames away? Or change the percentage values? Can you make the cube do something else? See if you can create a feeling of “life” in something so simple!