🎞️ CSS animation: A Complete Guide with Real-Life Examples

Payal PorwalPayal Porwal
6 min read

Table of contents

Animations are everywhere — from smooth button effects to moving banners and interactive loaders. With CSS, you can create beautiful, engaging animations without a single line of JavaScript.

This guide will help both freshers understand from scratch and experienced devs revise key animation concepts, backed by real-life examples and a practical project.

🎯 What is CSS animation?

The animation property allows you to animate HTML elements by defining how, when, and what you want to animate.

To use CSS animation, you define:

  1. A set of keyframes using @keyframes

  2. Assign that animation to an element using animation properties

🛠️ Required Pieces of CSS Animation

✅ 1. @keyframes

Defines the intermediate steps of an animation.

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

✅ 2. animation-name

Tells the element which keyframe to use.

animation-name: slideIn;

✅ 3. animation-duration

Sets how long the animation takes.

animation-duration: 1s; /* or 1000ms */

✅ 4. animation-timing-function

Controls the speed curve of the animation.

animation-timing-function: ease-in-out;

Common values:

  • linear

  • ease (default)

  • ease-in

  • ease-out

  • ease-in-out

  • steps(n)

✅ 5. animation-delay

Adds a pause before the animation starts.

animation-delay: 0.5s;

✅ 6. animation-iteration-count

Sets how many times the animation runs.

animation-iteration-count: infinite; /* or 2, 3, etc. */

✅ 7. animation-direction

Defines direction of animation.

animation-direction: alternate;

Values:

  • normal

  • reverse

  • alternate

  • alternate-reverse

✅ 8. animation-fill-mode

Controls the final state of the animated element.

animation-fill-mode: forwards;

Values:

  • none (default)

  • forwards

  • backwards

  • both

🧩 Shorthand Syntax

You can combine all these properties in one line:

animation: slideIn 1s ease-in-out 0.5s infinite alternate;

Format:

animation: name duration timing delay iteration direction fill;

📦 Real-Life Examples

✅ 1. Button Bounce on Hover

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

button:hover {
  animation: bounce 0.5s ease-in-out;
}

📌 Used in: Micro-interactions, call-to-action buttons

✅ 2. Loading Spinner

@keyframes rotate {
  100% { transform: rotate(360deg); }
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
}

📌 Used in: AJAX loaders, form submissions

✅ 3. Fade In on Page Load

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

.page {
  animation: fadeIn 1s ease-out;
}

📌 Used in: Content reveal, headers, modals

⚖️ Pros & Cons of CSS Animation

✅ Pros

  • No JavaScript needed

  • Fast and performant

  • Great for small UI animations

  • Easy to implement and control

❌ Cons

  • Complex sequences are hard to manage

  • No advanced condition handling (need JS for that)

  • Not accessible if not used carefully

🧪 Full Project Example: Animated Modal Popup

🔎 What We’ll Build:

  • A modal that slides in from the top

  • With a fade-in overlay

  • And a smooth close animation

💻 Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CSS Animation Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
    }

    .overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      animation: fadeIn 0.5s forwards;
    }

    .modal {
      position: fixed;
      top: -100%;
      left: 50%;
      transform: translateX(-50%);
      width: 300px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      animation: slideDown 0.5s forwards;
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
        visibility: visible;
      }
    }

    @keyframes slideDown {
      to {
        top: 100px;
      }
    }

    .btn {
      margin: 50px;
      padding: 10px 20px;
      font-size: 16px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>

  <button class="btn" onclick="openModal()">Open Modal</button>

  <div id="overlay" class="overlay hidden"></div>
  <div id="modal" class="modal hidden">
    <h3>Animated Modal</h3>
    <p>This modal slides in with animation!</p>
    <button class="btn" onclick="closeModal()">Close</button>
  </div>

  <script>
    function openModal() {
      document.getElementById("overlay").classList.remove("hidden");
      document.getElementById("modal").classList.remove("hidden");
    }

    function closeModal() {
      document.getElementById("overlay").classList.add("hidden");
      document.getElementById("modal").classList.add("hidden");
    }
  </script>

</body>
</html>

🧠 Recap

  • Use @keyframes to define how the animation progresses

  • Use animation properties to control timing, direction, repeat count, etc.

  • Great for subtle interactions and enhancing UX

  • Use with care to avoid performance or accessibility issues

💡 Final Thoughts

CSS animations can add magic ✨ to your website when used thoughtfully. From loaders to modals to micro-interactions — they’re a must-have skill in your frontend toolkit.

❓Frequently Asked Questions (FAQs)

1️⃣ Q: Are transition and animation different in CSS?

A: Yes, they are different:

  • transition is used when you want to animate between two states, such as hover or click.

  • animation is more powerful — it allows you to define multiple steps, loops, delays, and timing using @keyframes.

📌 Use transition for simple effects (like button hover), and animation for complex movements (like loading spinners or slide-in modals).

2️⃣ Q: What is slideIn in @keyframes?

A: slideIn is just the name of the animation.

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

You later reference it like this:

animation-name: slideIn;

It's not a built-in or predefined keyword — it's a custom name you define.

3️⃣ Q: Can I use other names in @keyframes like slideOut, bounceIn, or even my own name like zoomMagic?

A: Absolutely! You can name it anything you like, as long as it follows CSS naming rules (no spaces, no special characters).

Examples:

@keyframes fadeZoom {}
@keyframes zoomMagic123 {}
@keyframes myCustomEffect {}

✅ You are free to choose meaningful names based on what your animation does.

4️⃣ Q: Do I have to use all the animation properties every time?

A: No, it’s not mandatory to use every single property. Only animation-name and animation-duration are required.

Example:

animation: slideIn 1s;

But using additional properties like iteration-count, delay, and fill-mode gives you more control over the animation behavior.

5️⃣ Q: What does animation-fill-mode do in CSS animation?

A: animation-fill-mode defines how the element should look before or after the animation runs.

  • none: The default. The element returns to its original state after animation ends.

  • forwards: Keeps the element in its final keyframe style.

  • backwards: Applies the first keyframe style during the delay period.

  • both: Applies both forwards and backwards.

✅ Example:

animation-fill-mode: forwards;

This ensures the final state of your animation stays visible after the animation is over (commonly used in modals and loaders).

🔔 Stay Connected

If you found this article helpful and want to receive more such beginner-friendly and industry-relevant CSS notes, tutorials, and project ideas —
📩 Subscribe to our newsletter by entering your email below.

And if you're someone who wants to prepare for tech interviews while having a little fun and entertainment,
🎥 Don’t forget to subscribe to my YouTube channel – Knowledge Factory 22 – for regular content on tech concepts, career tips, and coding insights!

Stay curious. Keep building. 🚀

0
Subscribe to my newsletter

Read articles from Payal Porwal directly inside your inbox. Subscribe to the newsletter, and don't miss out.

animation property in csscss animationsCSS AnimationCSSAnimationspayalcss payalCSS3CSS#css-transitionstransition properties in CSSanimationKeyframe AnimationskeyframesAnimation in CSS animations

Written by

Payal Porwal
Payal Porwal

Hi there, tech enthusiasts! I'm a passionate Software Developer driven by a love for continuous learning and innovation. I thrive on exploring new tools and technologies, pushing boundaries, and finding creative solutions to complex problems. What You'll Find Here On my Hashnode blog, I share: 🚀 In-depth explorations of emerging technologies 💡 Practical tutorials and how-to guides 🔧Insights on software development best practices 🚀Reviews of the latest tools and frameworks 💡 Personal experiences from real-world projects. Join me as we bridge imagination and implementation in the tech world. Whether you're a seasoned pro or just starting out, there's always something new to discover! Let’s connect and grow together! 🌟