CSS Transitions
Transitions smoothly animate property changes between two states. When a CSS property changes (on hover, focus, class toggle), the transition interpolates between the old and new values over a specified duration. They are the simplest way to add polish and professionalism to any interface.
35 min•By Priygop Team•Last updated: Feb 2026
Transition Properties
- transition-property — Which properties to animate: all, transform, opacity, background-color, etc.
- transition-duration — How long: 0.3s is standard for UI interactions. Never exceed 0.5s for hover effects
- transition-timing-function — Speed curve: ease (default), ease-in-out (smooth), linear, cubic-bezier() for custom curves
- transition-delay — Wait before starting: transition-delay: 0.1s for staggered effects
- Shorthand — transition: transform 0.3s ease, opacity 0.3s ease. Comma-separate multiple properties
- Performance tip — Only animate transform and opacity. These use GPU compositing (no layout/paint). Animating width, height, margin triggers expensive reflows
Transition Code Examples
Example
/* Button hover effect */
.btn {
background: #E44D26;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(228, 77, 38, 0.4);
}
.btn:active {
transform: translateY(0);
}
/* Card lift on hover */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
/* Smooth color change */
.link {
color: #333;
transition: color 0.2s ease;
}
.link:hover {
color: #E44D26;
}
/* Scale image on hover */
.image-container {
overflow: hidden;
border-radius: 12px;
}
.image-container img {
transition: transform 0.4s ease;
}
.image-container:hover img {
transform: scale(1.08);
}Try It Yourself: Hover Effects
Try It Yourself: Hover EffectsHTML
HTML Editor
✓ ValidTab = 2 spaces
HTML|34 lines|1858 chars|✓ Valid syntax
UTF-8