CSS Animation Generator

How it works: Adjust the parameters on the left to visually build your animation. The tool will automatically generate the shorthand CSS property and the required @keyframes block for you to copy and paste into your stylesheet.
Animate

Mastering CSS Animations

CSS animations make it possible to animate transitions from one CSS style configuration to another without using JavaScript. They consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states.


Frequently Asked Questions

What is the CSS animation shorthand?
The shorthand syntax allows you to declare all animation rules in one line. For example: animation: slide 2s ease-in 1s infinite; defines the name, duration, timing function, delay, and repetition count.
What are @keyframes?
The @keyframes rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.
How do I make a CSS animation loop forever?
To make a CSS animation repeat continuously, set the Iteration Count (animation-iteration-count) property to infinite.