Cut CSS transition short?

Question

I am applying CSS transition to an element.

target.style.transition = "color 10000ms ease"; target.style.color = "red"; 

In certain circumstances, I want the final state of this transition to be achieved immediately, without waiting for the transition to complete.

If i try

  target.style.transition = "color 0ms"; target.style.color = "red"; 

the current transition is just continuing.

Performance

  target.style.transition = "color 0ms"; target.style.color = "blue"; 

sets the value to blue and

  target.style.transition = "color 0ms"; target.style.color = "blue"; target.style.color = "red"; 

leads to continued transition. (used in both Chrome and FF)

Is there any way to stop the transition?

Answer 1

To stop the transition and reach the final state, use

 target.style.transition = "none"; 

See DEMO .