Let’s begin with Lecture 24 of the HTML5 & CSS3 series. CSS Transitions and Transformations – Adding Life to Your Website. 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 CSS transitions for smooth property changes
- Know how to apply transformations like
scale,rotate,translate, andskew - Be able to create interactive effects on hover or click
- Add animations to buttons, images, and cards
- Make your website feel more dynamic and engaging!
💡 What Are Transitions?
Transitions allow you to smoothly animate a change in CSS properties over time — like changing color, size, or position.
Think of it like this:
If CSS is a car, then transitions are the gas pedal — they let things move smoothly instead of jumping from one state to another!
🔧 Basic Transition Syntax
.selector {
transition-property: property-name;
transition-duration: time;
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;
transition-delay: delay-time;
}Or use shorthand:
.selector {
transition: property duration timing-function delay;
}Example:
.button {
background-color: #3498db;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}Now when you hover, the button changes color smoothly!
🌀 What Are Transformations?
Transformations let you rotate, scale, skew, or move elements in 2D or 3D space.
They’re perfect for creating fun effects like:
- Hovering buttons
- Rotating icons
- Zooming images
- Sliding menus
🔤 Common Transform Functions
| Function | Description |
|---|---|
translate(x, y) | Move element horizontally and/or vertically |
scale(x, y) | Resize element (e.g.,scale(1.5)makes it 1.5x bigger) |
rotate(angle) | Rotate element (e.g.,rotate(45deg)) |
skew(x-angle, y-angle) | Tilt element |
matrix(a, b, c, d, e, f) | Combine transforms into one function (advanced) |
💻 Try This: Create a Fancy Button with Hover Effects
Let’s build a fancy animated button that scales and rotates slightly when hovered.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
animated-button.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>Animated Button</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
padding: 40px;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.button {
background-color: #e74c3c;
color: white;
border: none;
padding: 15px 30px;
font-size: 18px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.button:hover {
background-color: #c0392b;
transform: scale(1.1) rotate(2deg);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="button">Hover Me!</button>
<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 made a fancy button that grows and tilts when you hover over it!
💡 Bonus: Animate an Image with Transformations
You can also make images zoom in on hover!
Add This CSS:
.zoom-image {
width: 200px;
transition: transform 0.4s ease;
}
.zoom-image:hover {
transform: scale(1.2) rotate(-5deg);
}And add this HTML inside your <body>:
<img src="https://picsum.photos/id/1015/200/200" alt="Zoomable Image" class="zoom-image">Now the image grows and slightly tilts when you hover!
🧪 Try It Yourself!
- Add a
translateY(-5px)effect on hover to make the button “lift” up. - Make the button shake by using
rotate()with@keyframes. - Add a
skewX(5deg)effect to the button background. - Apply a transformation to multiple elements using
transform: translateX(10px) scale(1.05).
🚀 Next Lecture Preview:
In Lecture 25, we’ll explore CSS Animations with Keyframes — so you can create custom looping animations like loading spinners, bouncing balls, and slide-ins — bringing your website to life like never before!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series
