How to Create CSS Animations with Keyframes

CSS animations bring web pages to life with motion, transitions, and interactive effects. The @keyframes rule defines animation sequences with multiple steps, while animation properties control timing, duration, and easing. Writing keyframe animations by hand requires understanding percentages, timing functions, and property changes. Visual animation editors let you design animations interactively with timeline controls and live preview. This guide shows you how to create CSS animations using fixie.tools — a free visual keyframe editor with instant code generation.

Step 1: Open the CSS Animation Generator

Navigate to fixie.tools/animation in your browser. The animation editor works entirely in your browser with no server processing. You'll see a preview element that plays your animation in real-time as you build it.

Step 2: Define Animation Keyframes

Create keyframes at different percentages (0%, 50%, 100%) that define property values at specific points in the animation timeline. For a simple fade-in, set opacity: 0 at 0% and opacity: 1 at 100%. For a slide-in, set transform: translateX(-100px) at 0% and transform: translateX(0) at 100%. Add intermediate keyframes at 25%, 50%, 75% for complex multi-step animations.

Step 3: Set Duration and Timing

Configure animation duration (how long one cycle takes) in seconds or milliseconds. Typical durations are 0.3s for quick transitions, 0.6-1s for standard animations, and 2-5s for slow, ambient effects. Choose a timing function (easing) — ease-in-out for natural motion, linear for constant speed, ease-in for acceleration, ease-out for deceleration, or custom cubic-bezier curves for precise control.

Step 4: Configure Iteration and Direction

Set iteration count — 1 for play-once animations, infinite for loops, or a specific number for repeated cycles. Choose animation direction — normal (start to end), reverse (end to start), alternate (ping-pong back and forth), or alternate-reverse. For loading spinners and continuous effects, use infinite + linear. For one-time entrance effects, use 1 + ease-out.

Step 5: Copy Animation CSS Code

The tool generates complete CSS including both the @keyframes rule and animation properties. Click Copy to copy the code to your clipboard. Paste into your stylesheet, then apply the animation to elements with the generated class name. The code includes vendor prefixes for browser compatibility and works in all modern browsers. You can customize the animation name to match your project naming conventions.

Try It Now — Free, No Signup →

Frequently Asked Questions

What's the difference between CSS animations and transitions?

CSS transitions smoothly change a property from one value to another when triggered (like :hover). CSS animations use @keyframes to define multi-step sequences that can loop, reverse, and run automatically without triggers. Use transitions for simple state changes on hover or focus. Use animations for complex multi-step sequences, loading indicators, or continuous motion.

What CSS properties can be animated?

Most CSS properties that have numeric or color values can be animated: opacity, transform (translate, rotate, scale), colors (background-color, color, border-color), dimensions (width, height, margin, padding), and filters. Properties like display and visibility can't be smoothly animated but can be set at keyframe points. For best performance, animate transform and opacity which don't trigger layout recalculation.

What does animation-fill-mode do?

Fill mode controls what styles apply before/after animation. 'none' (default) removes animation styles when not running. 'forwards' keeps the final keyframe styles after animation ends (useful for fade-ins). 'backwards' applies first keyframe styles before animation starts. 'both' combines forwards and backwards. For entrance animations, use 'forwards' so elements stay visible.

Is the CSS animation generator free?

Yes, Fixie's CSS Animation Generator is completely free with no signup requirements, no limits on keyframes or animations, and no ads. Create complex animations with instant code generation and live preview.

How do I create smooth, natural-looking animations?

Use ease-in-out or custom cubic-bezier easing instead of linear. Keep durations reasonable (0.3-1s for UI, not 5s). Use transform instead of changing layout properties (left, width) for better performance. Add subtle delays between multiple animated elements. Study real-world motion — things accelerate and decelerate, they don't move at constant speed. Test on actual devices, not just desktop browsers.

Related Tools

CSS Gradient Generator

Create CSS gradients visually

Box Shadow Generator

Generate CSS box shadows

Flexbox Layout Generator

Build CSS flexbox layouts visually