What are CSS keyframes?

CSS

The short answer

Keyframes define the steps of a CSS animation. Inside an @keyframes rule you describe what the element should look like at certain points in the timeline, written as percentages from 0% to 100%. The browser fills in every value between those points. You then attach the keyframes to an element with the animation property, which controls how long the sequence runs and how it repeats.

Defining keyframes

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

from and to are aliases for 0% and 100%, so a two step animation can be written either way. The browser interpolates opacity and transform smoothly between the two states.

Multiple steps

The value of keyframes is that you are not limited to two points. You can describe a full path:

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

You can also list several percentages in one block when they share the same styles:

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

The animation shorthand

Attach the keyframes and control playback with animation:

.box {
  animation: slide-in 400ms ease-out forwards;
}

The shorthand sets, in order, the name, duration, timing function, and fill mode. The longhand version makes each part explicit:

.box {
  animation-name: slide-in;
  animation-duration: 400ms;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; /* keep the final frame after it ends */
  animation-iteration-count: 1;
  animation-delay: 0ms;
}

animation-fill-mode: forwards is worth knowing: without it, the element snaps back to its original styles when the animation finishes.

Interview Tip

Keep the properties you animate inside keyframes limited to transform and opacity when you can. Both can be handled by the GPU compositor, so the animation stays smooth. Animating width, height, top, or left inside keyframes forces layout on every frame and is a common cause of janky motion.

Why interviewers ask this

Keyframes are the foundation of every non trivial CSS animation: loaders, skeletons, attention cues, and entrance effects. Interviewers want to see that you can describe a multi step sequence, attach it with the animation shorthand, and reason about details like fill-mode and which properties are cheap to animate. It is a direct test of how comfortable you are building motion without a library.

Table of Contents