CSS Animation Generator

All tools

Interactive workspace

Use CSS Animation Generator

Processed in your browser where supported

CSS Animation Generator

Pick an animation, adjust timing and copy the CSS — all with a live preview.

Animation

Timing

Duration0.6s

Delay0s

Iterations

Easing

Direction

Fill Mode

Preview — Fade In

✨

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

.cxp-anim-fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.6s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: both;
  animation-direction: normal;
}

Shorthand

animation: fadeIn 0.6s ease 0s 1 normal both;

Free to useNo account required for this utility.

Built for clarityFocused controls and readable results.

Need another tool?Explore the complete library

Keep working

Browse all tools

Design