Making Your First Animated Sticker
A bounce, a squish, a little life. One keyframe animation is all it takes to make a static shape feel like it's breathing.
Life is just one property moving
A doodle that sits perfectly still looks like a screenshot. The fix is smaller than people expect — animate one property, just a little, forever. A gentle bob, a soft squish, a slow blink.
You don't need a timeline. One keyframe with two or three stops is plenty for a first sticker.
A bob is two transforms
Move up a few pixels, rotate a degree or two, then back. That's it. The tiny rotation is what sells it — pure up-down reads as a glitch, up-down-plus-tilt reads as breathing.
.sticker {
animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-7px) rotate(1.5deg); }
}
A blink is one flat keyframe
A blink is scaleY squashing the eyes flat for a single keyframe out of a long, mostly-still cycle. No eyelid element, no extra markup — just motion at the right moment.
Put the flat frame around 90% of the loop so the eyes stay open for most of the animation and snap shut briefly. That asymmetry is what makes it feel involuntary.
Ease-in-out, always
Linear motion reads as a machine. Ease-in-out on organic motion — bobbing, blinking, swaying — reads as breathing. Save linear for things that genuinely move at a constant rate, like falling rain.
More from the blog
Keep reading
CSS Art for Beginners: How to Think in Shapes
Before you write a single property, see your drawing as circles, ovals, and rounded rectangles stacked together. Once the shapes click, the CSS almost writes itself.
Drawing Cute Characters with Only Divs
No SVG, no canvas — just divs, border-radius, and a little patience. Here's how a boxy face turns soft and friendly.
When to Use SVG Instead of CSS
CSS is great until you need a curve that isn't a circle. Learn when to reach for SVG paths instead of forcing border-radius.
Hands on
Want to try the idea?
Pick a spot to sketch it out — nothing you make here is permanent.