Applying the Principles of Animation to CSS3 Animations (Part 1)

Breathe Life Into Your Learning Content

Tutorials Comments (1)

CSS3 animation is an exciting way to breathe life into learning content developed for Web and mobile devices.

In the past, the limitations of HTML made including animated elements developed for this type of consumption very difficult. Any animation would likely have been created using programs like Flash and Captivate. These programs require third-party plugins to be installed on the system for content to be viewed. This requirement immediately eliminates much of the potential audience because third-party plugins are restricted on certain mobile devices.

Thankfully, HTML5 and CSS3 solve this problem by including the tools needed for creative animators and developers to produce attractive animations for learning. When done well, these animations are not taxing on the users’ device hardware and are accessible on pretty much any device that can display HTML5 content.

The potential for producing great animations is high, but the somewhat unintuitive nature of creating these animations through manipulating code can lead to stiff, primitive and uninspired results.

Over the next few weeks, we’ll explore how to get the most out of our CSS animations by utilizing The 12 Principles of Animation.

The Principles of Animation

The Principles of Animation were created by renowned Disney animators (known affectionately as “The Nine Old Men”) during the 1930s. These principles served to codify animation techniques that were developed to bring a greater level of believability to movement and how that movement could better serve to express a sense of personality and character.

Two of the nine original Disney animators, Frank Thomas, and Ollie Johnston, famously compiled these principles into their 1981 book, The Illusion of Life: Disney Animation.

Later, Pixar founder John Lasseter expanded on these principles in a paper written for the 1987 SIGGRAPH Conference. Lasseter demonstrated that despite being developed early in the age of 2-D hand-drawn animation, these principles still had relevance in the modern era of computer animation.

With this illustrious history in mind, we will humbly explore and refine these principles a bit for the purpose of improving modern code-based animations.

It should be noted that this article is meant more as an introduction to animation for those who already have some basic knowledge of CSS. That said, the examples given are as simple and straightforward as possible so CSS animators of all skill levels can understand them.

The following links provide additional information for those looking to learn more about the basics of creating CSS animations:

Additionally, I have included the code for each example animation below. Follow along to create your own animations using the examples I’ve provided as a template.

Principle #1: Squash and Stretch

Squash and Stretch defines the malleability of an object by distorting its shape in reaction to movement.

click-to-play-POA1

As the ball strikes the ground, it squashes down as it absorbs the impact. It then springs back into the air and stretches a bit before reaching its apex.

This movement, though not terribly realistic, adds quite a bit of life to the object and helps to give the object a sense of mass and flexibility.

The amount of Squash and Stretch added to an object can also help to establish the material properties that the object represents. For example, you would expect an animated representation of a rubber ball to have a far greater amount of Squash and Stretch than a bowling ball.

Let’s take a brief look at the code used to create the Squash and Stretch effect in the above example.

(Note: For brevity, I’ve only included the prefix for Safari and Chrome support in the code snippets below. Visit this link for greater detail about browser support for CSS3 properties.)

@-webkit-keyframes top-property-animation {
 0% { top: 100px; }
 50% { top: 310px; }
 100% { top: 100px; }
}

@-webkit-keyframes squash-and-stretch-property-animation {
 0% { -webkit-transform: scale(1,1); } /** First number = X, second number = Y */
 35% { -webkit-transform: scale(1,1); }
 50% { -webkit-transform: scale(1.1,0.8); }
 65% { -webkit-transform: scale(1,1.2); }
 100% { -webkit-transform: scale(1,1); }
}

As you can see, we use the scale property to create the Squash and Stretch effect, and for the most part, keyframing the effect is fairly straightforward.

Creating the appearance of the ball hitting the ground before bouncing back into the air is done by delaying the scale until the bottom edge of the ball impacts the ground (in this case, about 35 percent of the way into the animation).

At 50 percent, the ball is then scaled both vertically (by squashing it 20 percent) and horizontally (by stretching it 10 percent) to give the sense that ball is changing its shape and not simply scaling smaller.

Think of it this way: If you were to squeeze a rubber ball, the air that makes up the interior volume of that ball must go somewhere, so it pushes outward on the sides of the ball and thus, the ball gets wider the harder you squeeze.

As the ball springs back into the air, we scale it slightly vertically (at 65 percent of the animation) to give the impression that the stored energy of the impact is suddenly released and helps to propel the ball into the air.

Principle #2: Timing and Motion

Timing and Motion define the scale and weight of an object by the length of time it takes for that object to complete a motion. Much like Squash and Stretch, Timing and Motion also serve to further define the mass of an object.

click-to-play-POA2

In the example above, the ball on the left appears to be the heavier of the two objects not only because of its size, but also because it takes twice as long for it to complete its animation cycle as compared to the ball on the right (as seen in the animation-duration property in the code snippet below).

Also, the ball on the right bounces higher into the air, giving it the impression of lighter mass.

.ball-1-bounce {
   position: absolute;
   -webkit-animation-name: top-property-animation1, left-property-animation1, scale-property-animation1;
   -webkit-animation-timing-function: ease;
   -webkit-animation-duration: 2s; /** s = seconds */
   -webkit-animation-iteration-count:infinite;
}

.ball-2-bounce {
   height:auto;
   width:auto;
   position: absolute;
   -webkit-animation-name: top-property-animation2, left-property-animation2, scale-property-animation2;
   -webkit-animation-timing-function: ease;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count:infinite;
}

The principle of Timing and Motion works because we perceive that larger, heavier objects tend to move more slowly than their smaller, lighter counterparts – although Newton’s laws tell us that this is not generally the case in real life.

An easy way to digest this principle is to consider the example of a gazelle and an elephant napping under a shade tree at the zoo. Upon awakening, the gazelle might spring up and bound off rather quickly, whereas the elephant could be expected to take longer to stand and would require more effort and time to do so.

Principle #3: Anticipation

Anticipation is the preparation for action. This principle is used to help direct the viewer’s attention to the appropriate area of the screen. It also serves to build suspense and the expectancy for movement which can be a useful device for setting the tone.

click-to-play-POA3

In the above example, the ball on the right is bouncing energetically while the ball on the left is at rest. This lack of motion helps distinguish the two objects and sets the stage for when the ball on the left begins to move.

We can delay the ball’s movement by defining a time within the animation where no movement takes place. In the code snippet below, we can see that the top position of the ball element remains the same for the first 40 percent of the animation, before any movement begins.

@-webkit-keyframes top-property-animation1 {
 0% { top: 300px; }
 40% { top: 300px; }
 60% { top: 320px; }
 80% { top: 100px; }
 95% { top: 310px; }
 100% { top: 300px; }
}

The resting ball’s first movement is to squash down slowly in preparation for a jump.

This move is similar a baseball player winding up for a pitch. The viewer sees this movement, is drawn to it, and can reasonably anticipate what might come next.

Principle #4: Staging

Staging involves presenting an idea so that it is unmistakable.

Careful consideration for staging ensures that viewers are able to recognize and understand everything that is happening within a scene as quickly as possible so that they do not miss any important information.

Although staging does require a certain amount of artistic insight, a few simple staging techniques can go a long way to keeping a scene clear and easily recognizable.

click-to-play-POA4

The example above shows two interpretations of a ball bouncing on the beach.

The scene on the left does a much better job of presenting this idea for several reasons.

First, the ball is represented as a beach ball, which is a familiar object that helps to set the scene for the viewer. The ball is bright, and the colors contrast nicely with the rest of the scene so that the eye is drawn to it. The background is also uncluttered, giving the ball ample room to move within the scene.

In fact, every element staged within the scene on the left only serves to enhance the presentation of the idea of a ball bouncing on the beach as one would expect. Contrast this with the scene on the right which is not staged as cleanly and clearly, and is tougher to interpret. The lacking of context makes selling the story far more difficult.

Stay Tuned for More

I hope you’re thinking about the possibilities of using animation for your next learning project. We’ve added CSS3 animation to interactive elements in some of the work we’ve created for our clients, and they have loved the excitement and the life that it breathes into their content.

Join me next week as I explore the second set of three sets animation principles, which includes how one animation effects others, how to transition from one state to another, and the paths objects take for movement.

Follow Float

» Tutorials » Applying the Principles of Animation...
On June 15, 2013
By
, , ,

One Response to Applying the Principles of Animation to CSS3 Animations (Part 1)

  1. […] Applying the Principles of Animation to CSS3 Animations (Part 1) […]

Leave a Reply

Your email address will not be published. Required fields are marked *

« »