Animation Timing Generator

Create CSS animation timing properties including duration, delay, iteration count, and easing functions.

Animation Settings

Duration: 1s

Delay: 0s

Iteration Count (0 = infinite)

Timing Function

Direction

Fill Mode

Presets

Animation Property

animation: example 1s ease 0s 1 normal none;

Keyframes Example

@keyframes example {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(200px);
    opacity: 1;
  }
}