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?

This question might help.

Barlas Apaydin
– Barlas Apaydin

2012-08-24 14:34:59 +00:00
Commented Aug 24, 2012 at 14:34 — Barlas Apaydin
– Barlas Apaydin, Commented Aug 24, 2012 at 14:34

McGarnagle · Accepted Answer · 2012-08-24 16:30:02Z

3

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:

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);
Use a regular timeout. The problem with this is that the timing won't be perfect (but maybe close enough).

setTimeout(callback, 1500);

edited Aug 24, 2012 at 16:30

answered Aug 24, 2012 at 14:36

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

IanBauters Over a year ago

Ok, no problem, what I was currently trying is this: italic_document.getElementById('smspopup').-webkit-animation('move-sms 1.5s 1 forwards;'); Any idea where I went wrong here?

McGarnagle Over a year ago

@IanBauters to add CSS properties directly, you'd use this: document.getElementById('smspopup').style["-webkit-animation"] = 'move-sms 1.5s 1 forwards';

IanBauters Over a year ago

Great! thanks, you din't happen to know how you reset the animation with webkitAnimationEnd?

Collectives™ on Stack Overflow

Start CSS3 animation using Javascript with onclick event

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related