CSS Transitions and Animations
Why Use CSS Animations?
Animations make your website feel alive, improving user experience, engagement, and interactivity without relying on JavaScript.
🔹 CSS Transitions
Transitions allow smooth changes from one style to another.
✅ Syntax:
.element {
transition: property duration timing-function delay;
}
✅ Example:
.button {
background-color: #0073aa;
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: #005e91;
}
You can specify multiple properties:
.card {
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
🔹 CSS Transform
Used to move, scale, rotate, or skew elements visually.
✅ Common Transform Functions:
transform: translateX(50px); /* Move right */
transform: scale(1.1); /* Zoom in */
transform: rotate(10deg); /* Rotate */
transform: skewX(10deg); /* Skew */
Combine multiple:
transform: scale(1.2) rotate(5deg);
🔹 Keyframe Animations
Keyframes let you define complex, multi-step animations.
✅ Syntax:
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.element {
animation: slideIn 0.5s ease forwards;
}
You can use percentages for more control:
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
🔹 Animation Properties
Property | Description |
---|---|
animation-name | Name of the keyframes |
animation-duration | Total time of animation |
animation-delay | Delay before it starts |
animation-timing-function | Speed curve (ease , linear , etc.) |
animation-iteration-count | How many times it repeats (infinite ) |
animation-direction | normal , reverse , alternate |
animation-fill-mode | Controls final state (forwards , etc.) |
✅ Example:
.element {
animation: fadeIn 1s ease-in-out 0.3s forwards;
}
🔸 Transitions vs Animations
Feature | Transitions | Animations |
---|---|---|
Trigger | User interaction (e.g., hover) | Auto or manual start (no trigger needed) |
Control | Limited (start/end only) | Full timeline control via keyframes |
Syntax | Short, simple | More complex, more powerful |
✨ Practical Tip
You can combine everything!
.card {
transform: scale(1);
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
}
Or animate in on load:
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fadeUp 0.6s ease-out forwards;
}
✅ Summary Covered
- Transitions: smooth style changes
- Transform: rotate, scale, skew, translate
- Keyframes: custom timeline animations
- Animation properties
- Transition vs animation comparison