CSS3 has brought about an excellent internal animation system that is very easy to use. Using these new methods you can animate with CSS without any knowledge of Javascript. In this CSS3 tutorial I will demonstrate how to create a simple animation that will be visible on any browser, assuming that it supports CSS3 animations. Here is an example of the animation we will create.

The first thing we want to do is add some HTML. We will need a container for the figure animation and a container to push the figure across the screen. I also added an outer container to give some space to the animation.

<div id="animation-container">
  <div id="animation-wrapper">
    <div class="animation"></div>
  </div>
</div>

That is it! That is all of the HTML we need. Now let us add the CSS. We start by creating the walking animation of the figure itself. Here we will draw the image and make it walk. The image we are using is a sprite with 4 steps.

@-webkit-keyframes figure {
  from { background-position: 0 0; }
  to { background-position: -200px 0; }
}
@keyframes figure {
  from { background-position: 0 0; }
  to { background-position: -200px 0; }
}
 
.animation {
  -webkit-animation: figure 0.5s steps(4) infinite alternate;
          animation: figure 0.5s steps(4) infinite alternate;
 
  background: url('figure.png') no-repeat center center transparent;
  height: 80px;
  width: 50px;
}

The keyframes tells the animation what it will do. In this case we will push the image to a background-position of -200px on the X axis. The animation property will let the browser know how many steps it will take to get through the sprite. There are four steps (50 x 4 = 200) to get through the animation. Finally we push the figure across the screen.

@-webkit-keyframes figure-move {
  0% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); left: 0; }
  49% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left: 50%; }
  100% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left: 0% }
}
@keyframes figure-move {
  0% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); left: 0; }
  49% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left: 50%; }
  100% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left: 0% }
}
 
#animation-wrapper {
  -webkit-animation: figure-move 10s linear 0s infinite;
          animation: figure-move 10s linear 0s infinite;
 
  height: 80px;
  position: absolute;
  width: 50px;
}

This animation is called figure-move, takes 10 seconds to get through, and uses a linear movement. We want it to move forever so we set the timing to infinite. The keyframe has 4 steps in it to allow the figure to move from the left to the right and vice versa. From 0% to 49% the figure will simply move to the right. At 50% The figure will flip on the Y axis 180% and start walking to the left for another 50% of the animation. We duplicate the transforms because we do not want the rotation to be occur over time. We make the rotations instant by allowing the figure to go from 0 - 49% in the 0 degree rotation, then 50% - 100% in the 180 degree rotation.

Below is the full markup and styling.

<style>
@-webkit-keyframes figure {
  from { background-position: 0 0; }
  to { background-position: -200px 0; }
}
@keyframes figure {
  from { background-position: 0 0; }
  to { background-position: -200px 0; }
}
 
@-webkit-keyframes figure-move {
  0% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); left: 0; }
  49% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left: 50%; }
  100% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left: 0% }
}
@keyframes figure-move {
  0% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); left: 0; }
  49% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left: 50%; }
  100% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left: 0% }
}
 
  #animation-wrapper {
    -webkit-animation: figure-move 10s linear 0s infinite;
            animation: figure-move 10s linear 0s infinite;
 
    height: 80px;
    position: absolute;
    width: 50px;
  }
 
  .animation {
    -webkit-animation: figure 0.5s steps(4) infinite alternate;
            animation: figure 0.5s steps(4) infinite alternate;
 
    background: url('figure.png') no-repeat center center transparent;
    height: 80px;
    width: 50px;
  }
</style>
<div id="animation-container">
  <div id="animation-wrapper">
    <div class="animation"></div>
  </div>
</div>
Tags