Start CSS3 animation using Javascript with onclick event

Question

I'm working on a webapp that uses CSS3 animations for some nice effects, but I can't figure out to activate them with an onclick event.

this is the CSS3 Animation: (The name of the DIV this is added to is #smspopup)

#smspopup {    
-webkit-animation: move-sms 1.5s 1;
    -webkit-animation-fill-mode: forwards;
}

And this is my Javascript where I just can't figure out what I need to get it going

function cancel_sms() 
{
    halte.style.opacity = 1;
    document.getElementById('smspopup').style.visibility = 'hidden';
    document.getElementById('up').style.visibility = 'visible';
}

And another thing I want to do is delay the functions 1.5 seconds until the animation is finished. Anyone any idea?

Answer 1

Starting the animation

Start by using a class instead of an ID. Change the CSS to this:

.smspopup {    
    -webkit-animation: move-sms 1.5s 1;
    -webkit-animation-fill-mode: forwards;
}

And add class=smspopup to the smspopup element.

Next, inside the handler (cancel_sms?), just add the class to the element to begin the animation:

document.getElementById('smspopup').className = 'smspopup';

Animation end callback

For the second question (targeting the end of the animation), there are two options:

1. Attach a callback to the transitionEnd event. The only problem with this is that you need to listen to vendor-specific events:

   myDiv.addEventListener('webkitAnimationEnd', callback);

2. Use a regular timeout. The problem with this is that the timing won't be perfect (but maybe close enough).

   setTimeout(callback, 1500);