Free tools Windows power users keep installed
One-click scans. No signup required.
Use a CSS transition to interpolate a property from its current value to a new value over time. Put the transition on the element’s base rule, then change the property in a state such as :hover, :focus-visible, or a class added by JavaScript. The transition controls how the change looks; it does not trigger the change itself.
A working CSS transition
This button changes color and moves slightly when hovered or keyboard-focused:
As an Amazon Associate I earn from qualifying purchases.
.button {
background-color: #2457c5;
transform: translateY(0);
transition: background-color 180ms ease, transform 180ms ease;
}
.button:hover,
.button:focus-visible {
background-color: #17449f;
transform: translateY(-2px);
}The base rule declares which properties transition and how. The alternate state supplies their destination values. When the state ends, the properties transition back to their base values. The values shown are an illustration, not a universally ideal duration or easing curve; choose and test motion in the context of your interface.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
What the transition shorthand controls
The common shorthand form is transition: property duration timing-function delay. For example, transition: opacity 200ms ease-in 50ms transitions opacity over 200 milliseconds, using an ease-in curve, after a 50-millisecond delay.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Control | What it sets | Example |
|---|---|---|
transition-property |
The property or properties whose changing values should transition. Explicit names make the intended animated set clear. | opacity or opacity, transform |
transition-duration |
How long the interpolation takes. Its initial value is 0s, so a nonzero duration is needed for visible motion. |
200ms |
transition-timing-function |
How the intermediate values progress during the duration. | ease, linear, or a custom easing function |
transition-delay |
How long to wait after the value changes before beginning the transition. | 50ms |
transition-behavior |
Whether discrete properties may participate in transitions. | allow-discrete |
The shorthand can include all five controls. When using a shorthand property such as background, animatable longhand sub-properties may be included; naming a specific longhand such as background-color can make the intended effect easier to understand. See MDN’s transition reference and guides to using CSS transitions for syntax and examples.
Choose properties deliberately
transition-property can name one property or a comma-separated list. all applies transitions to changing properties broadly, but it can animate changes you did not intend. Listing the properties makes the scope clearer:
transition: color 180ms ease, transform 180ms ease;Only the listed properties are transitioned. A transition also requires an actual change in value between states.
Match lists and timing
For comma-separated transition entries, duration, timing-function, and delay values form lists. If the lists have different lengths, values repeat or truncate to match the property list. Keep entries aligned when distinct properties need distinct timing; this is easier to maintain than relying on list matching rules. MDN documents the behavior for property selection, duration, timing functions, and delays.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Trigger the state change
A pseudo-class is one way to change a value, but transitions also work when JavaScript changes a class. Keep the transition in the base CSS rule and let the class define the new state:
.panel {
opacity: 0;
transform: translateY(8px);
transition: opacity 200ms ease, transform 200ms ease;
}
.panel.is-open {
opacity: 1;
transform: translateY(0);
}Adding or removing is-open changes the computed values; CSS handles interpolation. If no rule changes a transitioned property, there is nothing to animate.
Entry, exit, and discrete properties
Transitions most straightforwardly interpolate between values when an element already has a starting value. For a newly inserted element with no originating style, @starting-style can define a starting appearance. Discrete properties do not interpolate through intermediate values in the same way; transition-behavior: allow-discrete allows discrete transitions where supported. These newer capabilities can help with entry and exit effects, but check compatibility for the browsers your audience uses.
.notice {
opacity: 1;
transition: opacity 200ms ease, display 200ms allow-discrete;
}
.notice.is-hidden {
opacity: 0;
display: none;
}This example illustrates the newer behavior rather than a fallback for older browsers. MDN explains transition behavior and the CSS transitions module, including @starting-style. Core transition properties are widely available and generally established since September 2015; MDN marks transition-behavior Baseline 2024, so older browsers may not support it. Consult the compatibility tables when targeting a particular browser or version.
Best Value
Respect reduced-motion preferences
Motion can help explain state changes, but some motion can be problematic for people with cognitive concerns and may trigger vestibular disorders, epilepsy, or migraine. Offer a reduced-motion experience when a visitor has requested one. For a simple button effect, turn off the transition in that preference context:
@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}
}This is one implementation pattern, not a complete accessibility solution for every animation. For motion that continues or is essential to an interaction, consider whether users also need a way to pause or disable it. MDN discusses timing and accessibility in its timing-function reference.
Troubleshoot a transition that appears instant or does not run
- It changes instantly: check that a nonzero duration is set. The initial duration is
0s. - Nothing changes visually: confirm the property’s computed value actually changes between states and that it is included in
transition-property. - The destination value never appears: check whether another selector or declaration overrides the alternate-state rule.
- Only some properties animate: verify that each changed property is listed and that comma-separated timing lists align with the properties as intended.
- An entry or exit effect fails in an older browser: check support for
@starting-styleortransition-behavior; these features are newer than the core transition controls.
Or skip the browser setup
If you need a rendered screenshot to inspect how a transition looks, ScreenshotNeo is a website screenshot API and MCP server. A one-request capture can return an image or PDF; it does not replace writing or triggering the CSS transition.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorscurl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for request options. It removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for the free plan.
Frequently Asked Questions
Does a CSS transition create an interaction or state change by itself?
No. A pseudo-class, class change, or other change must supply the new property value; the transition interpolates between values.
Are CSS transitions and CSS animations the same thing?
No. A transition responds to a change between property values; CSS animations use keyframes to define animated stages.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
