Axum Graphics Notes

Keyframe & easing playground

Pick an object, set two to four keyframes, choose an easing and press play. Scrub the timeline, switch on onion skin to see the spacing, then copy the motion as CSS @keyframes.

0.00 s

Your CSS

Object

Keyframes

Time %XYScaleRotate°Opacity

Positions are in pixels on the 640 × 360 stage. The first keyframe is always at 0% and the last at 100%.

Curve

cubic-bezier(0.42, 0, 0.58, 1)

Pick "Custom cubic-bezier" to drag the handles. Arrow keys nudge the selected handle.

The guides, in reading order

Laid out like an exposure sheet, the chart animators use to plan timing frame by frame. Start at the top if you're new.

The 12 principles of animationThe classic rules for making drawn motion feel alive, one at a time, with an exercise for each. Keyframes and in-betweensKeys, breakdowns, in-betweens and the spacing between them, by hand and in software. Easing explainedWhy constant speed looks wrong, how to read an easing curve, and what each preset is for. Frame rates and timingFrames per second, drawings per second, and how to decide how long an action should take. Free 2D animation software typesFrame-by-frame, vector tweening, cut-out rigs, pixel art, 3D suites with 2D modes and browser tools, compared by type. Animating for the web with CSSTransitions, @keyframes, timing functions, performance and accessibility, with code you can paste.

Three things to try first

  1. Linear versus ease-in-out

    Leave the ball on two keyframes and switch between Linear and Ease-in-out with onion skin on. Linear spacing is even; eased spacing bunches up at the ends.

  2. A bouncing ball

    Choose Bounce and set the last keyframe's Y near the bottom of the stage. Then try four keyframes with your own arcs and compare.

  3. A fade-and-pop entrance

    Start the logo shape at opacity 0 and scale 0.6, end at 1 and 1, with Ease-out. That's the motion behind many web page entrances.

Questions

What is a keyframe?
A keyframe stores the state of an object at one moment: where it is, how big, how rotated, how visible. The frames between two keyframes are in-betweens, which the software calculates for you or which an animator draws by hand.
What does easing do?
Easing controls how values change between keyframes. Linear moves at a constant rate. Ease-in starts slowly and speeds up, ease-out slows down at the end, and ease-in-out does both. Bounce and elastic overshoot or rebound to suggest weight and springiness.
Can I use the copied CSS on my own website?
Yes. The playground outputs a standard @keyframes block and an animation rule. Positions are in pixels relative to the stage's top-left corner, so adjust them to fit your layout. Bounce and elastic use the CSS linear() easing function, which current versions of the major browsers support.
What is onion skinning?
Onion skinning shows faded copies of the object at earlier and later moments, like tracing paper on a light table. It shows the spacing between positions, which is where most beginner timing problems become visible.