How to use CSS3 animation

In CSS3 we have two ways of creating animations: We have CSS Transitions that allow us to create some simple effects for things like hover; and we also have CSS Animations for more complicated effects. We can in fact create pretty much any animation we want using pure CSS and since it works with keyframes it uses a system we are already used to seeing in software like After Effects and Flash. In this article I’ll get you through the basics of animating with vanilla CSS.

Browser support

CSS Animations are a somewhat advanced use for CSS and for something like that we can say that it has a pretty good browser support: it’s supported by all major browsers in their current version, in fact when it comes to desktop browsers the only one you need to be concerned about is Internet Explorer.

When it comes to mobile browsers it’s supported by all of them except Opera Mini, so everyone using Chrome Mobile, Firefox , or Safari can watch the CSS animations no problem.

The syntax

As I said before, CSS Animations work using keyframes. To have only two stages of animation we use the from and to keywords like so:

@keyframes moving{
   from {
      left: 100px
   }
   to {
      left: 300px;
   }
}

All this animation will do is move the element 200px to the right once the page loads. The moving keyword placed after keyframes is the name of our animation, we give it a name so that later we can reference it when applying it to an element. If we want to create more keyframes we can do so by using percentages.:

@keyframes moving{
   from {
      left: 100px
   }
  25% {
     top: 300px;
  }
  75% {
     top: 100px;
  }
   to {
      left: 300px;
   }
}

Using this idea you can create as many keyframes as you want and make it as complicated as you wish by changing other aspects in the element like the width or color.

Since this a new CSS3 addition we will need to add the vendor prefixes, in this case we will need the -webkit- and -moz- prefix and with them our code will look like this:

@keyframes moving{
   from {
      left: 100px
   }
  25% {
     top: 300px;
  }
  75% {
     top: 100px;
  }
   to {
      left: 300px;
   }
}
@-webkit-keyframes moving{
   from {
      left: 100px
   }
  25% {
     top: 300px;
  }
  75% {
     top: 100px;
  }
   to {
      left: 300px;
   }
}
@-moz-keyframes moving{
   from {
      left: 100px
   }
  25% {
     top: 300px;
  }
  75% {
     top: 100px;
  }
   to {
      left: 300px;
   }
}

Applying the animation

Our animation is now defined but if you load the page nothing happens, and that is because we need to hook our animation to an element. For that I’ll create a simple div then assign an animation as well as specifying a duration:

.animate {
  animation-name: moving;
  animation-duration: 500ms;
}

With these two properties, our animation is functional, but you may notice it has two major problems; it starts as soon as the page loads, and it also only runs once. In order to fix these two issues we need the animation-delay property and the animation-iteration-count property. In the first I’ll set the delay to 1500ms and in the second I’ll make the animation run forever by using infinite as the value:

.animate {
  animation-name: moving;
  animation-duration: 500ms;
  animation-delay: 1500ms;
  animation-iteration-count: infinite;
}

To improve this further we can use the animation-timing-function to use easing like ease-in, ease-out , ease-in-out , linear and so forth or we can even create our own using cubic-bezier. We also need to use the animation-direction to alternate the animation so that it plays in one direction, then reverses, then repeats:

.animate {
  animation-name: moving;
  animation-duration: 500ms;
  animation-delay: 1500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in;
}

Conclusion

This is just the beginning of what you can do with animation in CSS, there is a world of possibilities. Even though this is a very powerful tool you shouldn’t forget that it’s not supported in IE9 and below and because of that you should be very careful when using it and think about how important that bit of animation will be in your project.