Setting the property to "none" explicitly disables animation.
difference between null string and none
-
20-06-2023 - |
Question
I have the following script:
document.querySelector(".img-man").style.webkitAnimation = "";
Which was working on safari 5.1.7 but not on 7.0.2.
Later I changed to this:
document.querySelector(".img-man").style.webkitAnimation = "none";
Which is working fine now.
So, I'm curious to know the difference between "" and "none"
Solution
OTHER TIPS
"Then now it's not working in 5.1.7. So, what should I do?"
The issue with "none" not working could perhaps be fixed by using a dummy name:
document.querySelector(".img-man").style.webkitAnimation = "dummy";
As this is done trough JavaScript an alternative could be:
document.querySelector(".img-man").style.removeProperty('-webkit-animation-name');
OK. OP removed this part of the question after I wrote it, but leave it as it might help both him and others.
For the property itself; From Safari documentation we have for webkit-animation the sub property -webkit-animation-name:
-webkit-animation-name
Specifies the name of an animation.
Syntax
-webkit-animation-name: name [, ...]Parameters
nameThe name of the animation.
The name is used to select the -webkit-keyframe at-rule that provides the keyframes and property values for the animation. If the name does not match any -webkit-keyframe at-rule, there are no properties to be animated and the animation is not executed. See “@-webkit-keyframes” for a description of this rule.
If "none", no animation is executed even if there is a -webkit-keyframe at-rule with that name. Setting this property to "none" explicitly disables animations.
The default value is "".