demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Essential Animation Concepts Explained: Keyframes, Tweening and Framerate

css / animation

Estimated reading time: 1 minute, 36 seconds

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.

Pencil test for Timothy Mouse from Dumbo by Fred Moore

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.