Restart CSS3 animation after it's stopped

Question

I try to implement a CSS3 list menu with animation on each item. On page load, this is an hidden menu and the animation starts on click on the button with "#trigger-overlay" ID. There's a cross to close the menu and I would like to start again the animation on new click on the button with "#trigger-overlay" ID. I think there's a piece of code missing, probably something to do with style.webkitAnimationPlayState but I don't know how. Any help ?

Here's my code :

$( "#trigger-overlay" ).click(function() {
    $("ul#menu-main-menu li").each(function (i) {
        $(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
            + "-moz-animation-delay:" + i * 300 + "ms;"
            + "-o-animation-delay:" + i * 300 + "ms;"
            + "animation-delay:" + i * 300 + "ms;");
        if (i == $("ul#menu-main-menu li").size() -1) {
            $("ul#menu-main-menu").addClass("play")
        }
    });

Try to set up a jsFiddle with a working example. I need to see what the 'play' class does look like and what the handler for the close menu button does. On a quick guess, usually when you do some CSS manipulations inside a javascript function, the rules are not applied immediately, but when the browser decides to repaint. Usually you can force a repaint by putting your code inside a setTimeout(fn, 0) — Tiborg, Sep 11 '14 at 12:38
possible duplicate of [CSS animation doesn't restart when resetting class](http://stackoverflow.com/questions/16050914/css-animation-doesnt-restart-when-resetting-class) — Zach Saucier, Sep 11 '14 at 13:38
Zach Saucier: indeed, although the accepted answer isn't the best. IMHO that'd be [this one](http://stackoverflow.com/a/16619298/3022387). — flowtron, Sep 11 '14 at 14:24
I tried something like this for the close button but it doesn't work : $( ".overlay-close" ).click(function() { $('ul#menu-main-menu').removeClass('play'); $('ul#menu-main-menu').offsetWidth = $('ul#menu-main-menu').offsetWidth; // triggers reflow }); — Titifrim, Sep 11 '14 at 14:39

Teo · Answer 1 · 2014-09-11T14:24:01.817

You could use the transitionend event handler:

function addAnimation($elem) {
    $elem.attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
        + "-moz-animation-delay:" + i * 300 + "ms;"
        + "-o-animation-delay:" + i * 300 + "ms;"
        + "animation-delay:" + i * 300 + "ms;");
}

$( "#trigger-overlay" ).click(function() {
  $("ul#menu-main-menu li").each(function (i) {
    addAnimation($(this));
    if (i == $("ul#menu-main-menu li").size() -1) {
        $("ul#menu-main-menu").addClass("play")
    }
    $(this).off('transitionend').on('transitionend', function() {
      addAnimation($(this));
    });
  });
});

This isn't what the OP (original poster) is looking for. He's looking to restart the animation on click — Zach Saucier, Sep 11 '14 at 14:19

Restart CSS3 animation after it's stopped

1 Answers1