Add motion and interactivity to your CSS with transitions for smooth property changes and @keyframes animations for complex sequences. Learn timing functions, durations, and animation control.
A transition lets you animate the change of a CSS property from one value to another over a given duration. Instead of an abrupt jump, the property smoothly interpolates between values.
The transition shorthand combines four sub-properties:
.button {
transition: <property> <duration> <timing-function> <delay>;
}transition-property — Which CSS property to animate (background-color, transform, all, etc.).transition-duration — How long the transition takes (0.3s, 200ms).transition-timing-function — The acceleration curve (ease, linear, ease-in, ease-out, ease-in-out, or a cubic-bezier() function).transition-delay — How long to wait before the transition starts..button {
background-color: #6366f1;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #4f46e5;
}Transitions are triggered by state changes like :hover, :focus, :active, or class toggling via JavaScript. Not all CSS properties can be transitioned — only properties with interpolatable values (colors, sizes, opacity, transforms).
/* Transition multiple properties */
.card {
background-color: #1e293b;
transform: scale(1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease,
box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* Using 'all' transitions every changing property */
.link {
color: #94a3b8;
border-bottom: 2px solid transparent;
transition: all 0.2s ease-in-out;
}
.link:hover {
color: #6366f1;
border-bottom-color: #6366f1;
}While transitions animate between two states, @keyframes animations let you define complex, multi-step sequences that can loop, reverse, and run independently of user interaction.
First, define the animation with @keyframes:
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}Then apply it to an element with the animation shorthand:
.element {
animation: fadeIn 0.5s ease-out;
}The animation shorthand includes:
animation-name — The name of the @keyframes rule.animation-duration — How long one cycle takes.animation-timing-function — The easing curve.animation-delay — Delay before starting.animation-iteration-count — Number of times to play (1, 3, infinite).animation-direction — Play forward (normal), backward (reverse), or alternating (alternate).animation-fill-mode — Whether styles persist after the animation (forwards, backwards, both).What is the difference between a CSS transition and a CSS animation?