css animations basics

CSS Animations — Create Keyframe Effects

by

Want to add life to your website beyond simple hover effects? CSS Animations let you create smooth, continuous motion on your elements — without any JavaScript. With @keyframes rules, you can move, fade, rotate, or transform elements in creative ways. In this MiniCoursey quick guide, you’ll learn how CSS Animations work, how to write your first keyframe sequence, and how to control timing and repetition to build engaging animations that catch the eye without hurting performance.

What are CSS Animations?

Unlike Transitions, which animate a property from one state to another when triggered, CSS Animations use keyframes to define multiple states and animate automatically or when a class is applied. This lets you loop animations, run them once, or create more complex movement.

Writing Keyframes

Start by defining a @keyframes block with the stages of your animation, then apply it to an element with the animation property.


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

.box {
  width: 100px;
  height: 100px;
  background: #007acc;
  animation: slide 2s ease-in-out infinite alternate;
}

Animation Properties

The animation shorthand includes duration, timing function, delay, iteration count, and direction. infinite runs forever. alternate makes it reverse back and forth for a smoother effect.

💡 Pro Tip: Use transform and opacity for the smoothest animations — they’re GPU-accelerated and won’t cause layout shifts.

⚠️ Common Mistake: Avoid overusing animations. Too much motion can distract users or cause accessibility issues. Keep it subtle.

FAQ

Q: What’s the difference between Transitions and Animations?
A: Transitions animate between two states on user interaction. Animations run on their own with multiple keyframe steps.

Q: Can animations run only once?
A: Yes! Use animation-iteration-count: 1; for single runs.

Related Link

👉 Check out previous: CSS Transitions — Add Smooth Animations

Where to Learn More

Experiment with creative animations for hero sections, buttons, or loaders. MDN’s Animation docs have lots of great real-world examples. Try CodePen to tweak keyframes live!

Conclusion

Congrats — now you know how to bring your websites to life with CSS Animations and keyframes! With a few lines of CSS, you can make your pages feel interactive, modern, and polished.

✨ Bookmark MiniCoursey for more quick & free mini courses!

Leave a Comment