Question

Warning: I’m a noobie. I have these 2 functions in my J/S:

function please()
{
    document.getElementById("test3").innerHTML = "mercy";
}

function displayAnimation()
{

    document.getElementById('myfirst').style.animation-play-state = 'running';
    document.getElementById('myfirst').style.-moz-animation-play-state = 'running';
    document.getElementById('myfirst').style.-webkit-animation-play-state = 'running';

}

They do not interact whatsoever, from what I know. But when I have the 3 lines in displayAnimation(), please() does not work, even though my other J/S functions will work.

In addition to that, the animation isn’t changing from ‘pause’ to ‘running’ when I active displayAnimation().

Answer 1

If you take a good look at your style properties you’ll notice their syntax is invalid(JavaScript syntax)

The naming conventions for multiple word properties separated by a - is first-second –> firstSecond eg

style.animationPlayState

for vendor prefixes -prefix-other –> PrefixOther
eg

style.MozAnimationPlayState