CSS transition fires even if animation is enabled after changing animate property

Question

css

Hey!

I am using CSS transitions to animate page elements. I ran into a problem: with the following sequence of actions, the animation still happens , although it seems to me that it should not:

1. Change the value of an element property
2. Add a class to the element that animates this property

Fiddle demonstrating the problem. I would be grateful for tips on how to get rid of the animation in this situation.