Geek asks and answers

Run CSS3 animations using Javascript with onclick event

I am working on a webapp that uses CSS3 animations for some nice effects, but I can't figure out how to fire them using the onclick event.

this is CSS3 animation: (The name of the added DIV 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 do.

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

And one more thing I want to do is to delay functions 1.5 seconds before the animation finishes. Any idea?

+5
source share
1 answer

Start animation

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

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

And add class=smspopupto the element smspopup.

, (cancel_sms?) , :

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

( ) :

  • End. , , :

    myDiv.addEventListener('webkitAnimationEnd', callback);

  • -. , (, , ).

    setTimeout(callback, 1500);

+3

More articles:


All Articles