Preview

Preview

Keyframes Timeline

0%
50%
100%
0%25%50%75%100%
%
transform
opacity
%
transform
opacity
%
transform
opacity

Keyframes CSS

@keyframes myAnimation {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(50px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(100px);
    opacity: 1;
  }
}

Animation CSS

.animated-element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-play-state: running;
}

/* Shorthand */
.animated-element-shorthand {
  animation: myAnimation 1s ease 0s infinite normal forwards;
}

Complete CSS

@keyframes myAnimation {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(50px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(100px);
    opacity: 1;
  }
}

.animated-element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-play-state: running;
}

/* Shorthand */
.animated-element-shorthand {
  animation: myAnimation 1s ease 0s infinite normal forwards;
}

Animation Tips

  • Performance: Animate transform and opacity for best performance (GPU-accelerated).
  • Fill Mode: Use "forwards" to keep the final state, "backwards" for initial state during delay.
  • Direction: "Alternate" creates smooth back-and-forth animations.
  • Timing: Use cubic-bezier for custom easing curves, steps for sprite animations.
  • Accessibility: Respect prefers-reduced-motion for users who are sensitive to motion.
  • Chaining: Use animation-delay to sequence multiple animations.