css - Start CSS3 animation using Javascript with onclick event - Stack Overflow

admin管理员组

文章数量:1419189

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?

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?

• javascript
• css
• onclick
• dom-events
• css-animations

Share Improve this question Follow edited Jul 23, 2021 at 9:21 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 24, 2012 at 14:31 IanBautersIanBauters 15311 gold badge22 silver badges88 bronze badges 1

• This question might help. – Barlas Apaydin Commented Aug 24, 2012 at 14:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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:

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);

本文标签： cssStart CSS3 animation using Javascript with onclick eventStack Overflow