CSS transition-property Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS transition-property selecting which style changes animate on hover
Definition

Definition and Usage

The transition-property property names which CSS properties should transition when their values change. It is the “what” in a transition; transition-duration is the “how long.”

The initial value is all. Use none to turn transitions off, or list property names (and shorthands) separated by commas. It is not inherited. Pair it with duration, timing, and delay — or the transition shorthand.

Baseline · Widely available.

Not deprecated. Standard-track CSS. Prefer listing specific properties for clearer, cheaper UI motion. Only transitionable properties actually interpolate.

Syntax

CSS Syntax

syntax.css
transition-property: none | all | <custom-ident> | prop, prop, … | initial | inherit;

Examples: transition-property: opacity; · transition-property: background-color, transform; · transition-property: none;

Values

Property Values

ValueDescriptionTry it
allDefault. Every transitionable property that changes will animateTry it
noneNo properties transition; changes are instantTry it
Single propertyOne name such as opacity or transformTry it
Property listComma-separated names, mapped to duration/timing listsTry it
initialResets to allTry it
inheritTakes the value from the parent elementTry it
Approach

How to Use transition-property

Decide what should animate, then give those properties a duration.

  1. Pick the properties that will change (for example background-color or transform).
  2. Set transition-property to those names (or all / none).
  3. Add a positive transition-duration so motion is visible.
  4. Trigger a state change (hover, focus, class). Only listed properties blend.
PieceRequired?Role
Property name(s)YesChooses what is allowed to transition
DurationYes (to see motion)Default duration is 0s (instant)
State changeYesHover, focus, or class must change values
Transitionable propsYesDiscrete-only properties will not smoothly interpolate
Try it

Live Preview

Hover or focus the box. Color and size both change — but only listed properties animate.

Duration stays 0.5s. Only the property list changes.

Hover / focus

transition-property: background-color

Code

CSS Examples

Each snippet focuses on transition-property. Duration is only there so motion is visible. Use Try It Yourself for a live editor.

Example 1 — Transition One Property

Animate only the background; other changes stay instant.

CSS
<style>
  button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
    transition-property: background-color;
    transition-duration: 0.5s;
  }
  button:hover,
  button:focus-visible {
    background: #16a34a;
  }
</style>

<button type="button">Hover me</button>
Try It Yourself

How It Works

  1. Name one property. transition-property: background-color is the lesson.
  2. Give it time. transition-duration: 0.5s makes the blend visible.
  3. Change that property. Hover/focus switches blue to green.
  4. Other properties stay out. Only the listed name participates in the transition.

Example 2 — Disable Transitions

Keep a duration set, but turn transitions off with none.

CSS
<style>
  button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
    transition-property: none;
    transition-duration: 0.5s;
  }
  button:hover,
  button:focus-visible {
    background: #16a34a;
  }
</style>

<button type="button">Instant change</button>
Try It Yourself

How It Works

  1. Set none. No properties are allowed to transition.
  2. Duration is ignored for motion. Even 0.5s will not create a blend.
  3. Values still change. The color jumps on hover; it just is not animated.
  4. Useful for reduced motion. Or when a component should feel instant.

Example 3 — Transition a List

Animate color and transform together with one comma-separated list.

CSS
<style>
  button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
    transition-property: background-color, transform;
    transition-duration: 0.5s;
  }
  button:hover,
  button:focus-visible {
    background: #16a34a;
    transform: translateX(12px);
  }
</style>

<button type="button">Color and move</button>
Try It Yourself

How It Works

  1. List the names. Commas separate each property in the master list.
  2. Change both on hover. Background and transform update together.
  3. Both animate. Because both names are listed, both blend over 0.5s.
  4. Order matters for lists. Matching duration/timing lists pair by index.

Edge Cases & Pitfalls

If the wrong things animate (or nothing does), check these first.

all

all can animate more than you expect

The default includes every transitionable property that changes. Prefer an explicit list for predictable UI motion.

duration

Needs a positive duration

With transition-duration: 0s, nothing looks animated even when properties are listed.

shorthand

Shorthands expand to longhands

Naming a shorthand like background transitions its animatable longhands. Prefer the exact longhand when you want one channel only.

discrete

Not every property interpolates

display and many keyword-only properties do not blend smoothly under normal transitions. Listing them will not create a gradient-like animation.

perf

Prefer compositor-friendly properties

For UI motion, transform and opacity are usually smoother than animating layout sizes like width/height.

Compatibility

Browser Support

transition-property is a browser CSS property for choosing what transitions. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

transition-property

none, all, single properties, and comma-separated lists are widely supported across modern browsers since about September 2015.

97% Core support
Google Chrome 26+
Full support
Mozilla Firefox 16+
Full support
Apple Safari 9+
Full support
Microsoft Edge 12+
Full support
Opera 12.1+
Full support
Samsung Internet 1.5+
Full support
Internet Explorer 10+
Full support
transition-property Widely supported

Bottom line: Safe to teach and ship for none, all, and property lists. Prefer unprefixed standard syntax. It is not a runtime API.

Remember

Key Takeaways

  • Role: choose which CSS properties are allowed to transition.
  • Initial value: all. Use an explicit list when you want control.
  • none: disables transitions even if duration is set.
  • Lists: comma-separated names map to duration/timing lists by index.

One line: name the properties you want to animate — everything else still changes, but only the list blends over time.

Frequently Asked Questions

It names which CSS properties should transition when their values change. Other changing properties still jump instantly.
The initial value is all, so every transitionable property that changes will animate if a duration is set.
Listing specific properties (for example transform and opacity) is usually clearer and cheaper. Use all only when you want every changed property to animate.
Yes. Use a comma-separated list such as transition-property: background-color, transform;
none disables transitions on that element. Changing values apply immediately, even if duration is set.
It is Baseline Widely available across modern browsers. It is a browser CSS property, not a Node.js feature.

Next: transition-timing-function

Learn how easing curves shape the feel of a transition.

transition-timing-function tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS transition-duration Property CSS transition-timing-function Property