css keyframes

CSS Keyframes — Build Custom Animations

by

Want more than a simple hover effect? With CSS keyframes, you can build fully custom animations — from subtle fades to bouncy loops. Keyframes define how an element’s styles change step by step over time. This makes them perfect for loaders, attention grabbers, or decorative effects that bring your UI to life. In this MiniCoursey quick guide, you’ll learn how CSS keyframes work, how to write them, and best practices for clean, smooth animations.

What Are Keyframes?

Keyframes define the states of an animation at different moments. The browser interpolates between these states to create smooth motion.

Basic Syntax

Use @keyframes to name your animation and define its stages. Then attach it to an element with animation.


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation: fadeIn 1s ease-in forwards;
}

In this example, .box fades in from transparent to fully visible in 1 second.

Why Use Keyframes?

  • Create multi-step animations like slides, fades, spins, or bounces.
  • Control timing, easing, delays, and repeats.
  • Build reusable animation patterns for your whole site.

💡 Pro Tip: Use percentages or keywords like from and to — they’re the same thing!

⚠️ Common Mistake: Don’t animate properties that trigger reflow (like width/height) unless necessary — stick to opacity and transform for smoother performance.

FAQ

Q: Can I pause or reverse animations?
A: Yes! Use animation-play-state to pause, or set animation-direction: reverse; to flip it.

Q: How do I loop an animation?
A: Add infinite to the animation shorthand: animation: bounce 2s infinite;

Related Link

👉 Check out previous: CSS Animations vs Transitions — When to Use Each

Where to Learn More

Check MDN’s Keyframes guide for advanced examples. Try chaining multiple keyframes for fancy motion effects!

Conclusion

Congrats — you now know how to build custom animations with CSS keyframes! Smooth motion = more engaging designs.

✨ Bookmark MiniCoursey for more quick & free mini courses!

Leave a Comment