CODEWITHSUNDEEP
htmlcsscss-animations
Tyilo
Tyilo

Reputation: 30152

Repeat css animation once with javascript

Why can't I repeat a CSS animation with javascript once?

Fiddle: http://jsfiddle.net/6XtSa/

Upvotes: 2

Views: 1759

Answers (3)

Andy E
Andy E

Reputation: 344763

Here's an example adapted from a deleted answer that suggested using classes. That answer didn't quite get the animation right because it ran infinitely.

The idea is to add the class on click and remove it when the animationend event fires:

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

#button.animating {  
    -webkit-animation-name: rotate;  
    -webkit-animation-timing-function: linear;  
    -webkit-animation-duration: 1s; 
}

var btn = document.getElementById('button');

btn.addEventListener('click', function() {
    this.className = 'animating';
});
btn.addEventListener('webkitAnimationEnd', function(){
    this.className = '';
});

http://jsfiddle.net/AndyE/9LYAT/

Upvotes: 6

martineno
martineno

Reputation: 2635

You can try something like this: http://jsfiddle.net/6tZd3/

According to the Safari CSS Visual Effects Guide you can just listen to webkitTranstionEnd event to be notified that the animation has finished. At that point you can reset your animation without animating with JavaScript.

Upvotes: 0

T. Junghans
T. Junghans

Reputation: 11683

The reason the button is only rotating once is because it's rotating to and not by 360°. It's an absolute value. To rotate again you would have to rotate from 360° to 720°. You may want to have a look at this post: Rotating a Div Element in jQuery and specifically this jsfiddle in one of the answers: http://jsfiddle.net/uLrVy/

Upvotes: 0

Related Questions