Keyframes, tweening and framerate are concepts shared by almost every process that creates animated sequences, including Flash, 3D applications, video editors, and now CSS. As such, it’s very important to understand the basics of animation.

The classical animation process, pioneered by Walt Disney, was a natural evolution of the production line developed by Henry Ford and other industrial magnates of the early 20th century. It was a response to a simple problem: past the relative simplicity of Steamboat Willy, it was almost impossible for any one person to create an animated feature by themselves in anything like a reasonable amount of time. Instead, the primary drawings of an animation sequence – the key frames – were drawn by a lead animator. In a cartoon character’s leap, those frames might be the crouch, the moment of upwards drive, the top of the leap, and the landing. These keyframes would be passed off to leagues of junior animators, who would draw, or fill in, the frames in-between these moments, using the key frames as a reference (thus creating the term “tweening”).

Modern digital media artists are today’s lead animators, with the computer taking the work of tweening. What’s important is that we create the best keyframes possible, so that the computer can understand what we are trying to achieve.

When we create our animation, we have the ability to control how many frames appear between each keyframe, or (alternatively) how much time elapses between each keyframe. As a general rule, the more time/frames between keyframes, the smoother and slower the resulting animation will appear; fewer frames tend to result in choppy, staccato animation.

Playback smoothness will also depend on playback rate: a higher framerate (i.e. more frames per second) will result in a smoother movement, all other things being equal. It’s notable that CSS animation has a higher framerate than JavaScript, at least in most cases.

Photograph by Byron, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.