Keyframe

A CSS animation technique using @keyframes to define intermediate steps in an animation sequence, specifying styles at various points during the animation.

Overview

CSS @keyframes allow you to create complex animations by defining what styles should be applied at specific points during the animation timeline. Unlike transitions which only animate from one state to another, keyframe animations can have multiple stages and can loop indefinitely or run a specific number of times.

Example

css
/* Define keyframe animation */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Apply animation to element */
.slide-in {
  animation: slideIn 1s ease-out;
}

/* Multiple properties */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce {
  animation: bounce 0.5s infinite;
}

/* Using from and to (shorthand for 0% and 100%) */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Complex animation with multiple properties */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

Key Points

  • Define animations with multiple steps
  • Use percentages to specify timing
  • from and to are shortcuts for 0% and 100%
  • Can animate multiple CSS properties
  • More powerful than transitions

Learn More