How to start a css animation in my case?

Question

I am trying to use javascript to start a css animation in my app.

I have something like this.

#ball{
position:absolute;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;

animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:1;
-webkit-animation-direction:default;
-webkit-animation-play-state:running;
}


.stage2{
position:absolute;
animation-name:mySecond;
animation-duration:5s;
animation-timing-function:linear;

animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:1;
-webkit-animation-direction:default;
-webkit-animation-play-state:running;
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {left:2%; top:47%;}
20%  {left:16%; top:47%;}
40%  {left:16%; top:58%;}
60%  {left:-10%; top:58%;}
80%  {left:-10%; top:67%;}
100% {left:12%; top:67%;}
}

@-webkit-keyframes mySecond /* Safari and Chrome */
{
0%   {background:red; left:2%; top:25%;}
20%  {background:yellow; left:16%; top:25%;}
40%  {background:blue; left:16%; top:35%;}
60%  {background:green; left:0; top:35%;}
80% {background:red; left:0; top:45%;}
100% {background:red; left:12%; top:45%;}
}

html

<img id='ball' src='test.png' />
<a href='#' >click </a>

I want to have my img start another animation when user clicks a button.

js

$('#ball').on('animationend mozanimationend webkitAnimationEnd oAnimationEnd    
    msanimationend',function(){
            //first animation ended // works perfect
            $(this).hide()
 })

$('a').on('click', function(){
   $('#ball').show().addClass('stage2')
})

It doesn't seem to work. Can anyone help me about it? Thanks a lot!

Answer 1

It was a CSS issue. The element .stage2 had the following property:

-webkit-animation-name:myfirst;

Which was wrong, because you were using the same animation name for both animations.

It should be:

-webkit-animation-name:mySecond;

Aside from that, it's better to use the animation shorthand:

#ball {
    position:absolute;
    padding:10px;
    -webkit-animation:myfirst 2s linear 1;
}
#ball.stage2 {
    -webkit-animation:mySecond 2s linear 1;
}

(You should also add prefixes and @keyframes for browsers other than -webkit.)

Aside from these errors, there was also a specificity conflict as the first animation would play infinitely and overwrite the second animation when the class was added. I fixed this by adding an id to the second selector, #ball.stage2 - thus making it more specific. This will now cause it to overwrite the first animation when the class is added.

Also, as Arun P Johny points out, there was also a line break in the jQuery. Remove that, and fix the JS issues, and it should work.

UPDATED EXAMPLE HERE - (-webkit only - I haven't added other prefixes)

You can tell the second animation is working because the background color now changes.

Answer 2

If the above script is a copy of what you have, then there is a syntax error related to line termination. You have a line break after oAnimationEnd without a proper string termination.

Other than that it looks fine

jQuery(function () {
    $('#ball').on('animationend mozanimationend webkitAnimationEnd oAnimationEnd msanimationend', function () {
        //first animation ended // works perfect
        $(this).hide()
    })

    $('a').on('click', function () {
        $('#ball').show().addClass('stage2')
    })
})

Demo: Fiddle