CSS Transitions
CSS transitions animate property changes from one value to another over a set duration. They require a trigger (like :hover) to start.
Transitions are the simplest form of CSS animation — no keyframes needed.
CSS
Beginner
4 min read
Introduction to CSS Transitions
Example
.btn {
background: #007bff;
transition: background 0.3s ease;
}
.btn:hover {
background: #0056b3;
} Pro Tip
Transitions only animate from one state to another — they cannot loop or play spontaneously like animations.