CSS Animations: Create Keyframes Visually

How CSS Animations Work

CSS animations let you transition an element between multiple states over time without JavaScript. They are built on two pieces: a @keyframes rule that defines the states, and animation properties on the element that control timing, duration, and behavior.

A simple example: fading an element in from invisible to fully visible. The keyframes define opacity going from 0 to 1, and the animation property sets how long it takes:

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.element { animation: fadeIn 0.3s ease-out; }

The browser handles all the in-between frames (interpolation) automatically. You define the start and end states — or any number of intermediate states — and the browser calculates the smooth transitions between them.

CSS animations differ from CSS transitions in a key way: transitions animate between two states triggered by a property change (like hover), while animations can run automatically, loop infinitely, and define complex multi-step sequences with keyframes at any percentage from 0% to 100%.

Keyframes in Depth

The @keyframes rule accepts percentage-based stops that define the element's style at each point in the animation timeline:

@keyframes bounce {
0% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
80% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}

Each percentage represents a moment in the animation's total duration. If the animation runs for 1 second, the 40% keyframe occurs at 400 milliseconds. You can define as many keyframes as you need for complex motion.

You can animate most CSS properties in keyframes: transform, opacity, color, background-color, width, height, border-radius, and more. However, not all properties animate with equal performance — more on that in the performance section.

The from keyword is shorthand for 0%, and to is shorthand for 100%. Using percentages is more flexible and is the standard approach for anything beyond a simple two-state animation.

Animation Properties

The animation shorthand combines several sub-properties:

• animation-name: References the @keyframes rule by name.
• animation-duration: How long one cycle takes (e.g., 0.5s, 300ms).
• animation-timing-function: The acceleration curve. Common values: ease (default, slow start and end), linear (constant speed), ease-in (slow start), ease-out (slow end), ease-in-out, or a custom cubic-bezier().
• animation-delay: Time before the animation starts. Useful for staggering animations on multiple elements.
• animation-iteration-count: How many times to repeat. Use infinite for continuous loops.
• animation-direction: normal (forward), reverse, alternate (forward then backward), or alternate-reverse.
• animation-fill-mode: What styles apply before and after the animation. forwards keeps the final state, backwards applies the first keyframe during delay, both applies both.

Shorthand: animation: bounce 0.6s ease-in-out 0.1s infinite alternate;

Performance Best Practices

Not all CSS properties are equal when it comes to animation performance. Animating transform and opacity is fast because these properties can be handled entirely by the GPU compositor without triggering layout recalculations or repaints.

Animating width, height, margin, padding, top, left, or font-size is slow because each frame triggers a layout recalculation that affects other elements on the page. The browser must recalculate positions for every element that might be affected by the size change.

Practical guidelines for smooth 60fps animations:

• Use transform: translateX/Y/Z() instead of top/left/right/bottom for movement.
• Use transform: scale() instead of changing width/height for size changes.
• Use opacity for visibility transitions instead of display or visibility.
• Add will-change: transform to elements that will be animated, but remove it after the animation completes to free GPU memory.
• Prefer animation over JavaScript-driven style changes for repetitive animations. The browser can optimize CSS animations more aggressively than JavaScript-driven ones.

Create Animations Visually

Our CSS Animation Generator lets you build keyframe animations visually. Set the properties at each keyframe, adjust the timing curve with a visual bezier editor, preview the animation in real time, and copy the generated CSS code.

The visual approach is faster than writing keyframe percentages by hand, especially for complex multi-step animations. You can see exactly how the animation will look before committing to the code, and fine-tune the timing curve until the motion feels right. All processing runs in your browser with no dependencies.