Understanding CSS Keyframes and Animation Timing

Learn how to build smooth animations from scratch. We'll walk through timing functions, duration values, and common patterns you'll use in real projects.

12 min read Beginner July 2026

Laptop showing CSS keyframe animations with smooth transitions between different states and color shifts

Why Animation Timing Matters

Animation isn't just about making things move. It's about making interactions feel natural, responsive, and intentional. The difference between a sluggish interface and a delightful one often comes down to timing.

When you get the timing right — the duration, the easing function, the delay — users don't consciously notice. Instead, they feel the responsiveness. They feel the polish. That's the goal.

What You'll Learn

How @keyframes works and why it's different from transitions
Choosing duration and delay values that feel right
Easing functions: ease-in, ease-out, and custom curves
Real patterns you'll use in buttons, loading states, and more

The Anatomy of @keyframes

@keyframes is how you define animation sequences in CSS. Unlike transitions, which animate between two states, keyframes let you control exactly what happens at any point in time.

Here's the structure: you name your animation, define what happens at specific percentages (0%, 50%, 100%), then apply it to elements using the animation property. Simple in concept, but powerful in practice.

Basic @keyframes syntax:

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.element {
    animation: slideIn 0.6s ease-out;
}

That 0.6s is your duration. The ease-out is your timing function. Together, they determine how smooth and natural the motion feels.

Code editor showing CSS @keyframes animation definition with opacity and transform properties highlighted

Visual representation of animation timing curves showing linear, ease-in, ease-out, and ease-in-out easing functions as smooth lines

Choosing the Right Timing

Duration and easing function are your two main controls. Duration is straightforward — how long should this animation run? Usually between 200ms and 800ms for most UI animations.

But easing is where things get interesting. A linear animation feels robotic. An ease-out makes things feel snappy and responsive. An ease-in feels heavy and weighty. You're not just moving pixels — you're controlling perception.

ease-out (0.4s - 0.6s)

Use for entrances and reveals. Feels fast at first, then settles. Great for buttons, dropdowns, modals appearing.

ease-in (0.3s - 0.5s)

Use for exits and dismissals. Feels like things are falling away. Perfect for closing animations, navigation transitions.

ease-in-out (0.5s - 0.8s)

Use for longer movements across the screen. Accelerates then decelerates. Feels natural and deliberate.

Real Patterns You'll Use

Let's look at three animations you'll actually build. These aren't theoretical — they're practical patterns that appear on real websites.

1. Button Pulse

A subtle scale and shadow effect to draw attention. Duration: 200ms. This feels snappy without being distracting.

2. Loading Spinner

Continuous rotation with infinite animation. Duration: 1.2s linear. No easing because linear feels mechanical and appropriate for loading states.

3. Fade and Slide

Content entering from the side with opacity change. Duration: 0.5s ease-out. This is the workhorse pattern — you'll use variations of this constantly.

The common thread? None of these are longer than 1.2 seconds. Fast animations feel responsive. Slow animations feel sluggish. There's a sweet spot, and it's shorter than you might think.

Designer sketching animation storyboards with timing notes and keyframe positions marked on paper

Performance monitoring dashboard showing frame rate and animation metrics during smooth CSS animation playback

Performance Matters

Not all properties animate smoothly. Transform and opacity are cheap — they run on the GPU. Animating width, height, or left/top properties? That's expensive. The browser has to recalculate layout constantly.

This is why professionals use transform: translateX() instead of left. It's why we scale() instead of changing width. Same visual result, but 60fps instead of 20fps.

Animate These (GPU Friendly)

transform (translate, rotate, scale)
opacity
filter (blur, brightness, etc.)

You don't need fancy tools to check performance. Open DevTools, go to Performance tab, record a 3-second interaction, and look at the FPS. Smooth animations hit 60fps consistently. If you're dropping frames, reconsider which properties you're animating.

Learning Outcomes Vary

Individual learning outcomes vary from person to person. The techniques covered here provide a foundation for CSS animation, but your implementation will depend on your specific project needs, browser support requirements, and user device capabilities. Always test your animations across different devices and browsers to ensure consistent performance.

Start Building Animations

You now understand the mechanics: @keyframes define the animation, duration and easing control how it feels, and transform/opacity keep performance high. That's the foundation.

The next step is experimentation. Take a simple element on your page and animate it. Try different durations. Try different easing functions. Feel how they change the interaction. That hands-on experience is where the real learning happens.

Animation isn't magic. It's craft. And like any craft, it improves with practice.