Start CSS3 animation with jquery

Question

I am trying to start this specific CSS animation with jquery when you click the button. no idea how. Any ideas?

THanks

    <button>Click here to start the animation!!</button>
    <div id="ball"></div>

#ball {
    background:tomato;
    height:50px;
    width:50px;
    border-radius:200px;
    position:absolute;
    animation:bounce 3s infinite;
    -webkit-animation:bounce 3s infinite;
    top:40px;
}
@-webkit-keyframes bounce {
    50% {
        top: calc(100% - 50px);
    }
}
@keyframes bounce {
    50% {
        top: calc(100% - 50px);
    }
}

you could try to add the animation to a class and then give that element that class via jquery. — Pinki
– Pinki, Commented Mar 20, 2014 at 23:34

Josh Crozier · Accepted Answer · 2014-03-20 23:34:27Z

2

A very simple method would be to have the CSS animation properties on a seperate class and then toggle the class when the button is clicked.

EXAMPLE HERE

#ball.animate {
    animation:bounce 3s infinite;
    -webkit-animation:bounce 3s infinite;
}

jQuery:

$('button').on('click',function(){
    $('#ball').toggleClass('animate');
});

answered Mar 20, 2014 at 23:34

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

Comments

Longblog · Accepted Answer · 2014-03-21 00:15:52Z

0

Why not just use pure CSS3? There's no need to bring jQUery into the mix. Here's a jsfiddle illustrating how to do it using nothing more than the :checked pseudo selector.

answered Mar 21, 2014 at 0:15

Longblog

8592 gold badges11 silver badges20 bronze badges

Collectives™ on Stack Overflow

Start CSS3 animation with jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related