How to Use Keyframes in CSS for Animations

Use @keyframes in CSS to define animation steps by specifying styles at different points. Then apply the animation to an element using the animation property with the keyframe name, duration, and other options.

Syntax

The @keyframes rule defines the animation sequence by specifying styles at different percentages or keywords like from and to. You then use the animation property on an element to run the animation.

• @keyframes name { ... }: Defines the animation steps.
• 0% / from: Start state of the animation.
• 100% / to: End state of the animation.
• animation: name duration timing-function delay iteration-count direction fill-mode;: Applies the animation to an element.

css

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.element {
  animation: slide 2s linear infinite;
}

Example

This example moves a blue square 100 pixels to the right and back continuously using keyframes and the animation property.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

@keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #007BFF;
  animation: slideRight 3s ease-in-out infinite;
}

Output

A blue square in the center of the page moves smoothly 100 pixels to the right and then back to the start repeatedly.

Common Pitfalls

Common mistakes when using keyframes include:

• Not defining the @keyframes with the exact name used in animation.
• Forgetting to set the animation-duration, so the animation does not run.
• Using incorrect syntax inside keyframes, like missing curly braces or semicolons.
• Expecting the animation to run without specifying animation-iteration-count for repeating animations.

css

/* Wrong: animation name typo and missing duration */
.element {
  animation: slidr infinite;
}

/* Right: correct name and duration */
@keyframes slide {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: slide 2s infinite;
}

Quick Reference

Here is a quick summary of keyframe animation properties:

Property	Description	Example
@keyframes name { ... }	Defines animation steps	@keyframes fade { from {opacity:0;} to {opacity:1;} }
animation-name	Name of the keyframes to use	fade
animation-duration	How long the animation lasts	2s
animation-timing-function	Speed curve of animation	ease-in-out
animation-delay	Wait time before starting	1s
animation-iteration-count	How many times to repeat	infinite
animation-direction	Play forward, backward, or alternate	alternate
animation-fill-mode	Keep styles before/after animation	forwards

Key Takeaways

Use @keyframes to define animation steps with percentages or from/to.

Apply animations with the animation property including name and duration.

Always specify animation-duration or the animation won't run.

Check that the animation name matches exactly between @keyframes and animation property.

Use animation-iteration-count to repeat animations if needed.