Why does my CSS transition not run when I change a property?

Start with three checks: does the property’s value actually change, does an applicable transition include that property, and is its duration greater than zero? transition-property identifies which properties to transition; a change to a property outside that list happens immediately. The initial duration is 0s, so set a positive duration for a visible transition. [S1] [S2]

Try this small example:

.card {
  opacity: 0.6;
  transition: opacity 300ms ease;
}

.card:hover {
  opacity: 1;
}

The value changes from 0.6 to 1, and the shorthand names the property and sets a nonzero duration. Replace the selector and property with the ones you are troubleshooting.

Read the shorthand in this order: property, duration, timing function, then delay. For example, transition: opacity 300ms ease 100ms; specifies those four parts in that sequence. [S1] If you are unsure, temporarily split it into longhand declarations so each setting is easy to inspect:

.card {
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-delay: 0ms;
}

The duration corresponds to the property in the transition-property list. [S2] Check that the property you changed is included and that its applicable duration is positive.

Yes. Check the element’s styles in both its normal and hover states, and look for a rule that replaces the transition declaration or changes the property you expected to animate. The transition must remain applicable in the cascade when the state change happens. [S1]

A practical debugging pass:

1. Confirm the selector matches the element in both states.
2. Compare the property’s before-and-after values; if they are the same, there is no value change to transition.
3. Inspect the computed transition settings, including the property and duration.
4. Temporarily remove competing transition declarations, then restore them one at a time.

For example, if a base rule sets transition: opacity 300ms ease but a hover rule replaces it with transition: none, the intended transition may no longer apply. That is an illustrative possibility, not a diagnosis of your stylesheet; the actual cascade depends on your rules.

Make a tiny test using the same element and selector, then add back your original rules until the behavior changes. Keep the transition declaration simple at first, such as transition: opacity 300ms ease;, and use a clearly different before-and-after value. If that works in isolation but not on your page, focus on selector matching and competing declarations. If it does not, verify that the property is included and the duration is positive. The cited guidance covers the property list, shorthand order, cascade applicability, and zero-duration behavior; it does not establish what is wrong in a particular stylesheet. [S1] [S2]

Reusable template:

.target {
  /* starting value */
  opacity: 0.6;
  transition: opacity 300ms ease;
}

.target.is-active {
  /* changed value */
  opacity: 1;
}

Replace .target, .is-active, and the example values with your own. Test the simplest version first; then restore other transition settings and state rules one at a time.