Code Your Character with HTML & CSS

These Style Sheets Are Made for Walk’n!

Since the falloff of Flash, CSS animation has become a rather valuable tool for adding enhancements to a web page. Thanks to increasing browser support, developers are no longer restricted to minor transitions and hovering effects. While CSS does not yet offer the same flexibility and tools as Flash, the animation spec does provide some interesting similarities.

When you consider how Flash handles nested elements within a symbol, it is not too different from the way we nest elements within our markup. In fact, building a character with HTML is a lot like building a character in Flash. Also, when compared for animation, both methods support tweening, keyframes and image swapping capabilities to name only a few.

In this tutorial, we will be using HTML and CSS to create a character rig and walk cycle. For the purpose of demonstration, I am using Sonic as my character, however feel free to apply the following techniques to any character you’d like. Let’s get started!

Step 1: Building the Framework

Let’s start by building the framework for our character rig. We will do this by creating a series of containers within our markup. First, consider which way your character is going to be facing. Since the browser reads the web page from top to bottom, elements of equal weight — positioned lower on the chain — will be placed on top of preceding elements. For example, my character is going to be standing sideways, so I have placed the back arm and leg containers higher up in the chain. As a result, these elements will appear behind the body. Take a look at the code below to see how I have constructed the rig for my character.

<div class="rig">

  <div class="leftArm">
    <div class="upperLeftArm">
      <div class="lowerLeftArm">
        <div class="leftHand"></div>
      </div>
    </div>
  </div>

  <div class="leftLeg">
    <div class="upperLeftLeg">
      <div class="lowerLeftLeg">
        <div class="leftFoot"></div>
      </div>
    </div>
  </div>

  <div class="torso"></div>
  <div class="head"></div>

  <div class="rightLeg">
    <div class="upperRightLeg">
      <div class="lowerRightLeg">
        <div class="rightFoot"></div>
      </div>
    </div>
  </div>

  <div class="rightArm">
    <div class="upperRightArm">
      <div class="lowerRightArm">
        <div class="rightHand"></div>
      </div>
    </div>
  </div>

</div>

As you can see, all of the elements of the character are nested inside of a top level container with a class of rig. Due to the parent–child relationship, you can control the movement of the entire rig by moving the main rig container. In the same way, you can control child elements within the confines of their parent containers. For example, if you were to rotate the arm container, each nested element would move along the same axis. This becomes useful when you begin animating each piece of your character separately.

Step 2: Add Volume

Next, we are going to add volume to our character by assigning each nested element a width and height value. While the height values are determined by the design of your character, I found that assigning equal widths to each of the arm containers help to simplify the process. Use the widest element within your arm chain as reference. For instance, the hand of my character is wider than the upper and lower arm, so I would set the width of each element within the arm chain to be equal to the hand.

At this point, you should also add a background-color style to each child container. This will help you identify each piece of your rig on screen. Congratulations, you have just created a stack of boxes! 🙂 Take a look at the code below if you need help.

/*========== MAIN RIG ==========*/

.rig {
  width: 200px;
}

/*========== LEFT ARM ==========*/

.leftArm{
  width: 50px;
}

.upperLeftArm {
  width: 50px;
  height: 50px;
  background: lightblue;
}

.lowerLeftArm {
  width: 50px;
  height: 50px;
  background: blue;
}

.leftHand{
  width: 50px;
  height: 50px;
  background: darkblue;
}

/*========== LEFT LEG ==========*/

.leftLeg{
  width: 80px;
}

.upperLeftLeg {
  width: 50px;
  height: 60px;
  background: lightgray;
}

.lowerLeftLeg {
  width: 50px;
  height: 60px;
  background: gray;
}

.leftFoot{
  width: 90px;
  height: 60px;
  background: darkgray;
}

/*========== TORSO ==========*/

.torso {
  width: 100px;
  height: 100px;
  background: lightgreen;
}

/*========== HEAD ==========*/

.head {
  width: 150px;
  height: 150px;
  background: orange;
}

/*========== RIGHT ARM ==========*/

.rightArm{
  width: 50px;
}

.upperRightArm {
  width: 50px;
  height: 50px;
  background: lightblue;
}

.lowerRightArm {
  width: 50px;
  height: 50px;
  background: blue;
}

.rightHand{
  width: 50px;
  height: 50px;
  background: darkblue;
}

/*========== RIGHT LEG ==========*/

.leftLeg{
  width: 80px;
}

.upperRightLeg {
  width: 50px;
  height: 60px;
  background: lightgray;
}

.lowerRightLeg {
  width: 50px;
  height: 60px;
  background: gray;
}

.rightFoot{
  width: 90px;
  height: 60px;
  background: darkgray;
}

Step 3: Create a Resting Pose

Now that we have outlined the framework of our character, let’s create a resting pose. Start by assigning the rig container an absolute position value. Next, center the rig on screen. Child elements will now be positioned relative to the main rig container rather than the viewport. Again, assign an absolute position value to the head and body elements, and center them within the main rig container.

You may have noticed that each of the leg and arm containers are nested inside of a parent container. While these parent containers are not necessary for the animation of the arm and leg chains, they do serve a purpose. Positioning elements within a specific region is much easier than having everything placed inside of a single container.

Continuing on, assign an absolute position and value to the main arm and leg containers. Now position them within the rig. Finally, assign the remaining child containers an absolute position and value within the arm and leg chains. Since the arm containers are all the same width, you should only have to change the position along the x-axis. Look at the code below if you get stuck.

.rig {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 200px;
}

/*========== LEFT ARM ==========*/

.leftArm {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 160px;
  width: 50px;
}

.upperLeftArm {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  background: lightblue;
}

.lowerLeftArm {
  position: absolute;
  top: 50px;
  width: 50px;
  height: 50px;
  background: blue;
}

.leftHand{
  position: absolute;
  top: 50px;
  width: 50px;
  height: 50px;
  background: darkblue;
}

/*========== LEFT LEG ==========*/

.leftLeg {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 210px;
  width: 50px;
}

.upperLeftLeg {
  position: absolute;
  top: 0;
  width: 50px;
  height: 60px;
  background: lightgray;
}

.lowerLeftLeg {
  position: absolute;
  top: 60px;
  width: 50px;
  height: 60px;
  background: gray;
}

.leftFoot{
  position: absolute;
  top: 60px;
  width: 90px;
  height: 60px;
  background: darkgray;
}

/*========== TORSO ==========*/

.torso {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 150px;
  width: 100px;
  height: 100px;
  background: lightgreen;
}

/*========== HEAD ==========*/

.head {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top:0;
  width: 150px;
  height: 150px;
  background: orange;
}

/*========== RIGHT ARM ==========*/

.rightArm {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 160px;
  width: 50px;
}

.upperRightArm {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  background: lightblue;
}

.lowerRightArm {
  position: absolute;
  top: 50px;
  width: 50px;
  height: 50px;
  background: blue;
}

.rightHand{
  position: absolute;
  top: 50px;
  width: 50px;
  height: 50px;
  background: darkblue;
}

/*========== RIGHT LEG ==========*/

.rightLeg {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 210px;
  width: 50px;
}

.upperRightLeg {
  position: absolute;
  top: 0;
  width: 50px;
  height: 60px
  background: lightgray;
}

.lowerRightLeg {
  position: absolute;
  top: 60px;
  width: 50px;
  height: 60px;
  background: gray;
}

.rightFoot{
  position: absolute;
  top: 60px;
  width: 90px;
  height: 60px;
  background: darkgray;
}

Step 4: Add Character Assets

Next, let’s add our character assets to the rig. In this tutorial, we will not be designing a character. Instead, we will focus on preparing and migrating assets from a design application to a web page. If you have not yet designed a character, don’t worry. The following techniques will serve as a guide for your next character.

I used Adobe Illustrator to design my character, however feel free to use whatever design application you would like. Before we begin exporting our character assets, It is important to prepare the graphics, so they will fit nicely into our containers.

Start by creating individual artboards for each of your character’s body parts. Make sure the width and height of each artboard is the same size as your rig containers. If you are not using a program that supports multiple artboards, use slices instead. Again, make sure that your slices are the same size as your containers. This will be helpful when it comes time to transfer the assets to your rig.

Here are a couple speed bumps to watch out for:

  • Make sure your joints are lined up.
  • Set each graphic to be the full height of the artboard.
  • Test your joint rotations for gaps or rough edges.

Code Your Character with HTML & CSS Sonic Assets

Step 5: Add Joints

Now that our assets are in place, the next step is to add joints to our character. Generally, most characters will share the following rotation axis points: the neck, shoulders, elbows, wrists, hips, knees, and ankles. However, your character may have more or less depending on the design.

In the last section, we placed each arm and leg child container on top of one another. Can you guess how this might cause some problems? If you were to rotate any of the leg or arm joints in this position, you would see some noticeable gaps. In order to avoid gaps between joints, the containers must overlap. If you are unsure which container should be placed on top, go back and review the section on building a character rig.

Imagine a circle placed on top of where you want your joint to be. Pairing containers should be hinged to that circle. You should design these areas to be rounded at both ends, so when they are rotated there will not be any rough edges or gaps.

Once you have established the placement for your joints, move each container into place using the position properties. Next, apply the transform-origin property to each element containing a joint. For example, the knee joint controls the lower leg and the foot. Therefore, apply the transition-origin property to the lower leg. If you are unsure how the transform-origin property works, take a second to review the transform-origin documentation. Otherwise, use the image below for help if you get stuck.

Code Your Character with HTML & CSS Sonic Joints

Step 6: Animating Your Character

Animating your character with CSS is actually quite simple. In fact, with a little bit of patience and help from the @keyframes rule, we can create a walk cycle in no time. As a suggestion, It’s a good idea to start at the top of the hierarchical chain and work your way down. For example, begin by animating the parent arm container first, then the lower arm, followed by the hand. This will make it easier to catch problems early on.

The best way to create a walk cycle is to focus on one “key” pose at a time. In fact, a walk cycle consists of only four basic poses: contact, recoil, passing, and high-point. To demonstrate, take a look at how the angry animator creates a walk cycle.

Sonic assets

We will be using the @keyframes rule to control the animation of our character rig. The @keyframes rule applies changes to styles based on percentages. Therefore, you can set keyframes in incremental values. In addition to setting keyframes, you can also add transitional properties for more control. We will be taking advantage of a few of these properties for our walk cycle.

In this tutorial, we will not be covering specifics on how to use the @keyframes rule and the transform properties. If you are unsure, or just need a quick reminder, check out the documentation on the @keyframes rule and the transform property.

Animate the Arms

Let’s begin by animating the arms first. Use the @keyframes rule, along with the transform rotation property, to set “key” poses for each of the four positions. Remember to start at the top of the hierarchical chain and work your way down. For example, animate the shoulder first, then the elbow, followed by the wrist. In some cases, 4 key poses may not be necessary. Play with the rotation and timing until you are happy with the results.

Once you are happy with your animation, copy your work and apply it to the other arm. Then, offset the motion by reversing the order of the frames for arm number 2. Both arms should now be moving in opposite directions.

Animate the Legs

Follow the same process for animating the legs. Focus on one leg at a time, and refer to the walk cycle image if you need assistance. Also, make sure you sync your left arm with your right leg and likewise for the other side. Now, copy your work and apply the animation to the second leg. Finally, offset the keyframes so the legs are moving in opposite directions.

Animate the Head and Body

The last step is to animate the head and body elements of the rig. These containers will move in a bouncing motion as the figure steps from high-point to contact. However, feel free to explore different walking styles by slowing down or speeding up the motion. Check out the pen below if you get stuck.

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”zowjMO” default_tab=”css,result” user=”joeylane” preview=”true” data-preview=”true”]See the Pen Sonic walk cycle by joey lane (@joeylane) on CodePen.[/codepen_embed]

Great job — You have just created a character rig and walk cycle using HTML and CSS! Now that you know the basics, try adding some more details to your character. Consider what else might bounce as your character is being animated.

If you found this tutorial to be helpful, please take a second to share or leave a comment.

Share your thoughts