How to Create CSS Animations Online — Free (2026)

The brevio CSS Animation Generator builds the @keyframes rule and animation properties for any element, with a live preview and one-click copy. Everything runs client-side — no file upload, no account.

CSS Animation Syntax

CSS animations require two things: a @keyframes block that defines what changes, and animation properties on the element that define how it plays.

@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.element {
  animation: slide-in 0.5s ease-out forwards;
}

The Eight Animation Properties

How to Create a CSS Animation Step by Step

1. Open the CSS Animation Generator.
2. Name your animation. Use a descriptive, lowercase, hyphenated name — for example, fade-in-up or pulse. This name links the @keyframes block to the element.
3. Set the duration. Most UI transitions work well between 0.2s and 0.5s. Longer durations (1s+) are better for attention-getting animations like loaders.
4. Choose a timing function. ease is the natural default. ease-out feels responsive (fast start, gentle finish). linear is good for looping spinners. cubic-bezier allows full custom curves.
5. Set iteration count. Type 1 for a one-shot entrance animation. Type infinite for looping effects like spinners or pulsing indicators.
6. Choose fill mode. Use forwards for entrance animations so the element stays in its final state after the animation ends. both covers both before and after.
7. Preview the animation. Click Play Preview to see the animation on the demo box with your current settings.
8. Copy the CSS. Click Copy CSS to get the full animation class and keyframe block.

Common CSS Animation Patterns

Fade in

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in { animation: fade-in 0.3s ease forwards; }

Slide in from bottom

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slide-up 0.4s ease-out forwards; }

Infinite spinner

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }

Pulse (attention indicator)

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.pulse { animation: pulse 1.5s ease-in-out infinite; }

Reducing Motion for Accessibility

Users who have enabled "Reduce Motion" in their OS prefer minimal animations. Wrap your animations in a media query to respect this preference:

@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    animation: fade-in 0.4s ease forwards;
  }
}

This applies the animation only when the user has not requested reduced motion. Alternatively, disable or shorten animations in the prefers-reduced-motion: reduce query.

Frequently Asked Questions

What is the difference between CSS transitions and CSS animations?

Transitions animate a property change triggered by a state change (like :hover). They go from A to B once. CSS animations define arbitrary keyframe sequences (@keyframes) that run independently of user interaction, can loop, and can have multiple intermediate steps.

Can I animate any CSS property?

Most properties that take numeric or color values can be animated. Properties that trigger layout (like width, height, top, left) are expensive to animate. For performance, prefer animating transform and opacity, which are composited by the browser on the GPU without triggering layout or paint.

How do I pause and resume a CSS animation with JavaScript?

Toggle the animation-play-state property: element.style.animationPlayState = 'paused' to pause and 'running' to resume. This is the cleanest way to control animations without removing and re-adding CSS classes.