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
@keyframesto 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.htmlStep 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! 🌀
🧪 Try It Yourself!
- Make the ball change color as it bounces using
background-colorin@keyframes. - Change the timing function to
linearand see how it affects the bounce. - Add a fade-in effect to the ball when it loads using
opacity. - 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
