Animation Generator- CSS Keyframes

Create CSS keyframe animations with live preview.

[Ad]

Animation Name

Duration1s

Timing Function

Delay0s

Iteration Count

Direction

From Transform

To Transform

From Opacity1

To Opacity1

Generated CSS

@keyframes myAnimation {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100px);
    opacity: 1;
  }
}

animation: myAnimation 1s ease 0s infinite normal;

[Ad]

Why Use Our Animation Generator?

Live Animation

Watch your animation play in real time as you adjust parameters.

Full Control

Duration, timing, delay, iterations, direction, and keyframes.

Copy Code

Copy complete @keyframes and animation CSS.

Visual

See the animated preview box respond to your settings.

Private

All processing in your browser.

Instant

Animation updates instantly as you change values.

Other CSS Tools

Box Shadow

Generate CSS box-shadow with live preview

Gradient Builder

Create CSS gradient backgrounds

Flexbox Generator

Design flexbox layouts

Grid Generator

Build CSS Grid layouts

Border Radius

Fine-tune border-radius

Text Shadow

Generate text-shadow effects

CSS Filter

Apply CSS filter effects

Glassmorphism

Generate glassmorphism effects

Neumorphism

Create neumorphic styles

CSS Transform

Create transform effects

Meta Tag

Generate HTML meta tags

HTML Table

Generate HTML table code

CSS Animation Guide

CSS animations enable smooth transitions between visual states using @keyframes rules. They consist of two parts: the keyframe definition (the animation stages) and the animation property (how the keyframes are applied).

CSS animations are GPU-accelerated when using transform and opacity, making them highly performant for creating engaging user interfaces.

What are CSS animations?

CSS animations allow you to animate transitions between CSS styles. They use @keyframes to define the animation sequence and the animation property to apply it.

What is @keyframes?

@keyframes defines the stages of an animation. You specify CSS properties at different points (from/to or percentages) and the browser interpolates between them.

What timing functions are available?

Common timing functions include ease, ease-in, ease-out, ease-in-out, and linear. You can also use cubic-bezier() for custom curves.

What does animation-iteration-count do?

It sets how many times the animation repeats. Use a number for specific count or 'infinite' for endless looping.

What does animation-direction do?

It controls the direction: normal (forward), reverse (backward), alternate (forward then backward), or alternate-reverse.

Can I animate any CSS property?

Most visual CSS properties can be animated. Transform and opacity are the most performant as they are GPU-accelerated.

How do I pause an animation?

Use animation-play-state: paused to pause and running to resume an animation.

Is this tool free?

Yes, completely free with no signup. Create unlimited CSS animations with live preview.

What is animation-fill-mode?

animation-fill-mode specifies how styles are applied before and after the animation. 'forwards' keeps the final state.

Are CSS animations performant?

Animations using transform and opacity are GPU-accelerated and very performant. Avoid animating layout properties like width or height.

Animation Generator Tool

Why Use Our Animation Generator?

Other CSS Tools

CSS Animation Guide