What does animation:none do exactly?

Question

I've got an HTML element here with this starting style: transition: transform 2s;

First, it is animated (it rotatesX) via a class that is added on click. On the next click, another class is added that adds a transform3d that should move the element vertically and this should take 2 seconds as per the rule above.

The transform3d doesn't take effect unless I add this rule to the element: animation: none as well. I am confused on what animation: none actually does. Are there complications with transforming an element that has had an animation applied to it?

Answer 1

animation: none sets all animate-* properties to their initial value:

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

The problem is that your element has an animation which affects its transform property. Therefore, when you modify its static transform, you don't see the change because it's overridden by the animation.

Then, if you remove the animation, you see the change in transform.

This is unrelated to transforms, it would happen with any property, like color:

div {
  animation: color-anim 1s infinite;
}
@keyframes color-anim {
  from { color: red }
  to { color: blue }
}

<div>Lorem ipsum</div>
<button onclick="document.querySelector('div').style.color = '#fff'">Make white</button>
<button onclick="document.querySelector('div').style.animation = 'none'">Remove animation</button>