CSS Animations Generator

Create custom CSS animations with keyframes and animation properties.

Animation Properties

Animation Name

Duration (seconds)2s

Timing Function

Delay (seconds)0s

Iteration Count

Direction

Fill Mode

Quick Presets

Keyframes

%

%

%

Preview

Animation updates automatically when you change properties

Tips:

• Use transform properties like: scale(1.2), rotate(45deg), translateX(20px)
• Combine transforms: scale(1.1) translateY(-10px) rotate(5deg)
• For opacity effects, use: opacity(0.5) along with transforms
• Set fill-mode to 'forwards' to keep the final state