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

Bringing It All Together For Your Mobile Learning Animations

Tutorials Comments (0)

In the previous two articles (here and here), we explored the first eight of the 12 Principles of Animation and how we could utilize these principles to bring a greater degree of life and visual interest to our mobile learning content.

Today, we finish up our discussion with the final four Principles.

Principle #9: Exaggeration

Exaggeration involves the careful distortion of an object’s properties in order to enhance its movements for a specific effect.

This principle works best when it is carefully utilized by the animator in very specific situations.

It is easy to build too much Exaggeration into an animation, the results of which are often comical and chaotic – in ways, we don’t intend them to be.

The following shows both good and bad examples of Exaggeration.


The scale values of the ball on the left are exaggerated to give it a bit of personality and to evoke a sense the ball is leaping into the air under its own power, rather than simply bouncing.

The same values were more greatly exaggerated for the ball on the right. However, the results are too extreme, resulting in an animation that is unnatural and unconvincing.

The following code snippet shows the difference between the two versions. It also shows how carefully tailored adjustment to property values can be utilized for best results.

@-webkit-keyframes scale-property-animation1 {
 0% { -webkit-transform: scale(1,1); }
 36% { -webkit-transform: scale(1,1.25); }
 50% { -webkit-transform: scale(1.6,0.78); }
 72% { -webkit-transform: scale(.72,1.4); }
 100% { -webkit-transform: scale(1,1); }
@-webkit-keyframes scale-property-animation2 {
 0% { -webkit-transform: scale(1,1); }
 35% { -webkit-transform: scale(1,1.2); }
 50% { -webkit-transform: scale(2.5,0.5); }
 65% { -webkit-transform: scale(1,2.5); }
 100% { -webkit-transform: scale(1,1); }

Note the more finely tuned scale and timing values in the keyframes for the property linked to the first ball.

Principle #10: Secondary Action

This principle addresses animated elements that support and bolster the primary action in a scene.

In well-animated scenes, secondary action adds believability, complexity, and visual interest to the scene without detracting from the overall presentation.

The following example demonstrates how the secondary action of the ball rotating through the air helps adds believability to the primary action of the ball’s arcing trajectory by adding a sense of momentum and natural movement.


This rotation is controlled by adding a rotate property to the ball element is displayed below.

@-webkit-keyframes rotate-property-animation {
 0% { -webkit-transform: rotate(0deg); }
 100% { -webkit-transform: rotate(270deg); }

Principle #11: Appeal

An animation that has good appeal is one that the viewer enjoys watching.

Appeal is another of those principles that requires a certain degree of artistic know-how to get right.

When addressing an animation’s Appeal, consideration must be paid to the potential reaction of the viewer. If the action is nice, but the elements themselves are not appealing, the overall scene is likely to elicit a negative reaction. The same goes for scenes with nicely rendered elements with poorly constructed action.

The following example, though admittedly a bit extreme, demonstrates the differing amounts of Appeal between two scenes that contain the exact same animation.

In the scene on the left, the elements have been designed with consideration for color, line, texture, and shape. The scene on the right…not so much.


Principle #12: Quality

John Lasseter interprets this principle as “Personality.” However, for CSS animations, it is better depicted as “Quality.”

This principle is the goal of all of the previous principles combined. If the animator has carefully considered and utilized these principles, the resulting animation is one that conveys excellence and professionalism.


Overcoming the naturally primitive and dry nature of animations created with code can be a bit tricky. But, as we’ve seen, with a bit of cleverness and careful consideration for the techniques pioneered by nine old men nearly 80 years ago, even CSS3 animation can deliver a very high degree of character, personality, and believability.

Consider how you could use CSS3 animation techniques for your next mobile learning project. Maybe you need to show how to operate certain levers on a piece of equipment. Maybe you need to drive your equipment along with a certain pattern. Or maybe, in a lab setting, you’re showing how one item reacts to another.

By leveraging these techniques for mobile learning, you’ll be able to help your learners better perform their on-the-job tasks.

» Tutorials » Applying the Principles of Animation...
On July 5, 2013
, , ,

Leave a Reply

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

« »