A transition in CSS is a gradual change between two visual states over a specified period of time.
Until now, when we hovered over a button and activated the :hover pseudo-class, the color or opacity change happened in zero milliseconds. That abrupt jump looks a bit rough to the eye.
The transition property allows us to tell the browser that, instead of jumping from point A to point B instantly, it should calculate the intermediate steps and draw a smooth animation.
The Syntax of Transition
The transition property is actually a shorthand for writing several sub-properties in a single line. For it to work correctly, we need to pass three fundamental pieces of data to the browser.
.smooth-button {
background-color: blue;
color: white;
/* Property to animate | Duration | Timing function */
transition: background-color 0.3s ease;
}
.smooth-button:hover {
background-color: darkblue; /* The final state we want to reach */
}
Let’s break down those three components we put in the rule to understand exactly what they do.
What to Animate (transition-property)
The first value indicates which specific characteristic will undergo the progressive change. In our example, we set background-color, so the background color will mutate slowly.
You can animate width (width), position, text color, and almost any numeric property. If you want to animate absolutely everything at once, you can use the keyword all (though it’s better to be specific so the browser doesn’t overwork by calculating unnecessary things).
How Long It Takes (transition-duration)
The second value is the total time it will take to complete the effect. It can be expressed in milliseconds (ms) or, more commonly, in fractions of a second (s).
For user interface elements (like buttons or links), the industry standard is usually between 0.2s and 0.3s. If you make it slower, the user will get frustrated waiting for the button to finish lighting up. The interface should feel fast and responsive.
How It Moves (transition-timing-function)
The last value defines the acceleration curve of the animation. Not all movements in the real world are constant and linear, and the same is true on the web.
- linear: The change happens at a constant speed from start to finish (it’s very robotic).
- ease: This is the default value. It starts slow, accelerates in the middle, and slows down smoothly at the end. It mimics real-world inertia very well and is the one you’ll use almost always.
- ease-in: Starts very slow and picks up speed at the end (ideal for falling objects).
- ease-out: Starts fast and gradually slows down at the end (ideal for things that enter the screen and stop).
The Delay (transition-delay)
This is an optional parameter at the end of the declaration. It tells the browser how many seconds to wait before starting to calculate the transition. It is extremely useful for creating cascading animations (for example, having items in a list appear one after another with a 0.1s offset).
Performance Disclaimer - Hardware Acceleration
By adding transitions, we are forcing the user’s CPU to calculate dozens of frames per second. If you’re not careful, your website will stutter (the dreaded jank), especially on low-end mobile phones.
Do not animate properties that alter the geometric Box Model (like width, height, margin, padding, top, or left). Animating a width forces the browser to recalculate the position of all neighboring elements on the screen 60 times per second (a very expensive process called Reflow).
To achieve smooth animations, prioritize transform (scale, move, rotate) and opacity. These are generally the cheapest properties to animate because the browser can compose them without recalculating the entire layout.
