transition vs animation
transition - triggered by state change
Animates between two states when a CSS property changes.
css
.button {
background: blue;
transform: scale(1);
transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
background: darkblue;
transform: scale(1.05);
/* transition animates the change automatically */
}transition syntax: property duration timing-function delay
animation - runs independently with keyframes
Plays automatically, can loop, pause, and run complex multi-step sequences.
css
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.spinner {
animation: spin 1s linear infinite;
}
.loader {
animation: bounce 0.6s ease-in-out infinite;
}animation shorthand: name duration timing-function delay iteration-count direction fill-mode
Comparison
transition | animation | |
|---|---|---|
| Trigger | State change (hover, class) | Automatic / on load |
| Keyframes | 2 states only | Multiple keyframes |
| Loop | No | Yes (infinite) |
| Pause/resume | No | Yes (paused) |
| Complexity | Simple | Complex sequences |
Performance tip
css
/* animate only these - they run on GPU compositor thread */
.fast {
transform: translateX(100px); /* yes */
opacity: 0.5; /* yes */
}
/* avoid animating these - trigger layout recalculation */
.slow {
width: 200px; /* no */
margin-top: 20px; /* no */
}Stick to animating
transformandopacityfor 60fps animations. Everything else triggers layout or paint.
updated
did you know it?