CSS Animation Builder

Visual keyframe editor to create custom CSS animations with ease.

Preview
Result
@keyframes custom-animation { 0% { transform: rotate(0deg) scale(1); opacity: 1; } 100% { transform: rotate(0deg) scale(1); opacity: 1; } } .animated-element { animation: custom-animation 2s ease-in-out infinite; }
Settings
2s
0°
1x
100%

CSS animations let an element gradually change from one style to another.

About this Tool

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

Frequently Asked Questions

Previous
Neumorphism GeneratorDesign & Style
Next
Color Contrast CheckerDesign & Style