CSS Animations

Keyframe Animations

@keyframes defines animation steps.

animation-name references the keyframe.

animation-duration sets animation length.

animation-iteration-count controls repetitions.

animation-direction: normal, reverse, alternate.

/* Define keyframes */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(300px);
  }
}

/* Apply animation */
.element {
  animation: slide 2s ease-in-out infinite alternate;
}

/* Multi-step animation */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}