Day 2 - Animations & Transforms
Bring your web pages to life with smooth transitions and complex keyframe animations.
1. Transitions
Smoothly change property values (like color or size) over a given duration when an event occurs (like hover).
Code:
.trans-box {
background-color: green;
transition: background-color 0.5s ease;
}
.trans-box:hover {
background-color: orange;
}
Output (Hover over them):
2. Transforms
Modify the shape and position of elements: rotate,
scale, translate, skew.
Code:
.rotate-box:hover {
transform: rotate(180deg);
}
.scale-box:hover {
transform: scale(0.5);
}
/* Shrink to 50% */
Output (Hover over them):
3. Animation Basics: Point A to Point B
The most common animation is moving an element from a starting position (Point A) to an ending position (Point B).
Code:
.anim-move {
animation: moveRight 2s infinite alternate;
}
@keyframes moveRight {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
Output:
4. Keyframe Animations
Create complex animations by defining steps (keyframes).
Shorthand Syntax Order:
animation: name duration timing-function delay iteration-count
direction fill-mode;
Code:
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.anim-spin {
/* name | duration | timing-function | delay | iteration-count | direction | fill-mode */
animation: spin 2s linear 0s infinite normal none;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% { transform: translateY(-30px); }
}
.anim-bounce {
animation: bounce 1s ease 0s infinite normal none;
}
Output:
5. Practical: Loading Spinner
A classic use case for infinite rotation animations.
Output:
6. Practical: 3D Card Flip
Using perspective, backface-visibility,
and transform: rotateY.