difference between null string and none

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"

Answer 1

Setting the property to "none" explicitly disables animation.

Link

Answer 2

"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
 name

The 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 "".

---