One of the most interesting CSS3 features to me is animation. Until recently, I had only looked in awe upon the fancy animations that other developers had created, wondering how it was done. Then I decided to take the plunge and try it out for myself. I invite you to jump in with me--come on, the water's fine.

The Basics

The first step is deciding what you want to animate. Most, but not all, CSS properties can be animated using CSS3. The rule is that the CSS property has to have a "tween" state. For example, margin-left can be animated because there are infinitely many possible positions between margin-left: 0px and margin-left: 100px. display, on the other hand, cannot be animated because there is nothing between, for example, display: block and display: none.

"But wait!" you might say. "Isn't fading out elements an example of animation between display: block and display: none?" And it would be perfectly understandable for one to assume that--after all, it is a pretty common effect that we've all seen at some point or another. However, the way to achieve that effect is by animating opacity, not display.

Setup

Just like my last blog post, we'll be recreating some of the effects in this pen. There is a lot of animation there, but we'll focus on one of the simpler ones.

Let's animate sliding in an image from the left. It'll look something like this:

For the HTML, we just have an image inside of a containing div (in the demo pen, the figures were all created using box-shadow; if you want to see how that was done, read this blog post).

  <div class=flower-container>
  <img class="flower-img" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/256/Retro-Flower-Fire-2-icon.png"/>
</div>

We want the image to hide somewhere to the left of the containing div, and then slide in. We'll hide the overflow and make sure that the position is relative, so that we won't keep seeing it just pop up to the left (toggle these off in your browser's inspector to see the difference).

  .flower-container {
  height: 256px;
  overflow:hidden;
  position:relative;
}

For now, all we need on the image is an absolute position. The rest will be handled in the animation part of the CSS. css .flower-img { position: absolute; }

Make it Move

Now it's time to do what you came here to do--animate the element. But before you can use an animation, you have to create it. We can create an animation by creating @keyframes to tell the browser what properties to animate, and what the values for those properties should be at specific intervals. A basic animation keyframe might look something like this:

  @keyframes slide{
  // At 0% (beginning) of the animation's time-frame, left property should be -256px
  0% {
    left: -256px;
  }
  // At 100% (end) of the animation's time-frame, left property should be 256px
  100% {
    left: 256px;
  }
  // You can place as many intervals as you like in here.
}

Most browsers still require vendor prefixes. You might be surprised (I was) to find that IE10 and IE11 actually do not require a vendor prefix. Less surprising is that IE prior to 10 do not support animations at all. Here are the declarations including vendor-prefixed versions of the slide keyframe for webkit, mozilla, and opera (you can just add them to the CSS right along with the @keyframes version):

  @keyframes slide{
  0% {
    left: -256px;
  }
  100% {
    left: 256px;
  }
}
@-webkit-keyframes slide{
  0% {
    left: -256px;
  }
  100% {
    left: 256px;
  }
}
@-moz-keyframes slide{
  0% {
    left: -256px;
  }
  100% {
    left: 256px;
  }
}
@-o-keyframes slide{
  0% {
    left: -256px;
  }
  100% {
    left: 256px;
  }
}

Once you've declared your animation keyframes, it needs to be invoked from the animated element's CSS. The short-hand values below represent animation-name animation-duration animation-timing-function animation-iteration-count, in that order. There are other properties as well. A more detailed explanation of both the short-hand and long-hand versions of these properties can be found here.

  .flower-img {
  position: absolute;
  animation: slide 2s linear infinite;
}

Like the keyframes, the animation property comes in an assortment of vendor-prefixed flavors for your enjoyment:

  .flower-img {
  position: absolute;
  animation: slide 2s linear infinite;
  -webkit-animation: slide 2s linear infinite;
  -moz-animation: slide 2s linear infinite;
  -o-animation: slide 2s linear infinite;
}

All Wrapped Up

By now you should be able to animate just about anything you want. You can check out some more complex animations in the demo below (click here if it's too small to see). Most of the action is in the animations used to make Mario walk over, punch a block, and walk back, but the animations used to slide in the elements in the top half of the demo are pretty close to what we've done in this blog.

I'm learning this stuff right along with you, so if you find mistakes, have questions, or just want to say something, feel free to use the comments section. I plan to have a blog explaining the use of hidden radio inputs and the general-sibling selector to alter CSS properties for elements and trigger animations up by sometime next week.


4,561 6 22