Skip to content

CSS Animations with Keyframes | Lecture 25

CSS Animations with Keyframes

Let’s begin with Lecture 25 of the HTML5 & CSS3 series. CSS Animations with Keyframes – Create Custom Moving Effects. This lecture is for absolute beginners; even kids can follow along and understand.

🎯 Objective:

By the end of this lecture, you will:

  • Understand how to use @keyframes to create custom animations
  • Be able to animate elements using CSS animations
  • Know how to control animation duration, speed, and looping
  • Create fun effects like bouncing balls, loading spinners, and fade-ins
  • Bring your website to life with smooth, custom movement!

💡 What Are CSS Animations?

CSS Animations let you animate almost any CSS property over time — with full control over each step.

Think of it like this:

If transitions are a car moving from point A to B, then animations are a full cartoon movie — frame by frame, you decide what happens!

🔧 The Two Parts of an Animation

1. Define @keyframes

Use @keyframes to define how the element should look at different stages of the animation.

@keyframes example {
    from { /* starting style */ }
    to { /* ending style */ }
}

Or use percentages:

@keyframes bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-30px); }
    100% { transform: translateY(0); }
}
2. Apply the Animation to an Element
.element {
    animation-name: bounce;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}

You can also use shorthand:

animation: bounce 1s ease-in-out 0s infinite;
💻 Try This: Make a Bouncing Ball Animation

Let’s build a bouncing ball that moves up and down continuously.

Step 1: Create a New File

In your VS Code project folder (MyFirstWebsite), create a new file named:

bouncing-ball.html
Step 2: Add This Code
<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Ball Animation</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .ball {
            width: 60px;
            height: 60px;
            background-color: #e74c3c;
            border-radius: 50%;
            position: relative;
            animation: bounce 1s ease-in-out infinite;
        }

        @keyframes bounce {
            0% {
                top: 0;
            }
            50% {
                top: 100px;
            }
            100% {
                top: 0;
            }
        }
    </style>
</head>
<body>
    <div class="ball"></div>

    <p style="position: absolute; top: 20px; left: 20px;"><a href="index.html">Back to Home</a></p>
</body>
</html>
Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

🎉 You’ve created a real animated bouncing ball using only HTML and CSS!

💡 Bonus: Make a Spinning Loading Spinner

Add this extra animation to show a spinning spinner , great for loading screens or buttons.

Update Your <style> Tag Like This:
<style>
    body {
        margin: 0;
        height: 100vh;
        background-color: #f4f4f4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

    .ball {
        width: 60px;
        height: 60px;
        background-color: #e74c3c;
        border-radius: 50%;
        position: relative;
        animation: bounce 1s ease-in-out infinite;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #ccc;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes bounce {
        0%   { top: 0; }
        50%  { top: 100px; }
        100% { top: 0; }
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
</style>

And add this HTML inside your <body>:

<div class="spinner"></div>

Now you have two animations on one page — a bouncing ball and a spinning loader! 🌀

CSS Animations with Keyframes
A boy typing into a computer screen showing a bouncing ball with labeled frames

🧪 Try It Yourself!

  1. Make the ball change color as it bounces using background-color in @keyframes.
  2. Change the timing function to linear and see how it affects the bounce.
  3. Add a fade-in effect to the ball when it loads using opacity.
  4. Make the spinner pulse by scaling it up and down while it spins.
🚀 Next Lecture Preview:

In Lecture 26, we’ll learn how to make our websites look great on mobile devices using media queries — so your layout adjusts automatically whether someone is viewing your site on a phone, tablet, or desktop!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series

Tags: