Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Animation-play-state lines not working and disabling another function?

Animation-play-state lines not working and disabling another function?

Problem

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().

Problem courtesy of: user1472747

Solution

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
Solution courtesy of: Musa

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Animation-play-state lines not working and disabling another function?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×