CSS Animation Generator

Back to Homepage

Design custom CSS animations with presets and a live preview.

Animation Properties

Animation Preset

Duration1s

Delay0s

Timing Function

Iteration Count

Direction

Fill Mode

Preview

@keyframes

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.your-class

.your-class {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

About This Tool

The CSS Animation Generator provides an intuitive, visual interface for creating CSS animations. Instead of writing complex keyframes by hand, you can select from a list of preset animations (like fade, slide, bounce, etc.), customize properties such as duration, timing, and iteration count, and see a live preview of your animation. The tool then generates all the necessary CSS code, including the `@keyframes`, for you to copy and paste directly into your projects.

How to Use

Select a preset animation from the dropdown menu (e.g., "fadeIn", "slideInUp").
Adjust the sliders and select options in the "Animation Properties" card to customize the animation's behavior. You can change duration, delay, timing function, and more.
Observe the live preview on the right to see your animation in action. You can click "Replay Animation" to see it again.
Once you are satisfied with the result, copy the generated CSS code from the two output boxes below the preview. You'll need both the `@keyframes` and the animation properties for your CSS class.