What does animation:none do exactly?
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>
aeyang
Updated on June 13, 2022Comments
-
aeyang almost 2 years
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 whatanimation: none
actually does. Are there complications with transforming an element that has had an animation applied to it?