css3 animation on click with javascript

Question

I need to animate several items at the same time, several times on click. I'm not allowed to use Jquery so I'm working with native javascript and CSS3.

Array.prototype.forEach.call(els, function(el) {
    elemId = el.getAttribute("id");

    var toWidth = boxPos[thisId][elemId].width;
    var toHeight = boxPos[thisId][elemId].height;
    var toTop = boxPos[thisId][elemId].top;
    var toLeft = boxPos[thisId][elemId].left;           
    var from = "0% {width:"+currPos[elemId].width+"; height:"+currPos[elemId].height+"; top:"+currPos[elemId].top+"; left:"+currPos[elemId].left+";}";
    var to = "100% { width:"+toWidth+"; height:"+toHeight+"; top:"+toTop+"; left:"+toLeft+";}";
    currPos[elemId].width = toWidth;
    currPos[elemId].height = toHeight;
    currPos[elemId].top = toTop;
    currPos[elemId].left = toLeft;

    var styleSheets = document.styleSheets;
    for (var i = 0; i < styleSheets.length; ++i) {
        for (var j = 0; j < styleSheets[i].cssRules.length; ++j) {
            if (styleSheets[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && styleSheets[i].cssRules[j].name == elemId){
                keyframes = styleSheets[i].cssRules[j];

            }
        }
    }
    keyframes.deleteRule("0%");
    keyframes.deleteRule("100%");

    keyframes.insertRule(from);
    keyframes.insertRule(to);
    el.style.webkitAnimationName = elemId;
});

I've searched around the site and have tried using some of the code. The animation will run once, all the elements but just the first time :'(

Here's a non working example code http://jsfiddle.net/kR384/2/

Please also show us how you are attaching the click handlers and how the click handler invokes this animation. — Bergi, Jun 25 '13 at 00:22
hey @Bergi, just added the full code, only the 10 and 7 box is clickable, I should be able to click one after the other the animation just runs once — chrysillo, Jun 25 '13 at 16:15
Seems to be a duplicate of [How do I re-trigger a WebKit CSS animation via JavaScript?](http://stackoverflow.com/questions/4797675/how-do-i-re-trigger-a-webkit-css-animation-via-javascript) — Bergi, Jun 25 '13 at 17:30

Bergi · Accepted Answer · 2013-06-25T17:28:01.033

1

The animation will run once, all the elements but just the first time

You seem to be looking for the animation-iteration-count CSS property, which specifies how often an animation will run. You can set it to infinite or any numerical (positive) value.

The problem you have with your animations is that they are only started on the first click. After that, you don't change the element's styles (reassigning the animation-name doesn't help) - so no animation will get triggered (even if you changed the keyframes rules). The article at http://css-tricks.com/restart-css-animation/ discusses this and a few solutions.

In your case it would even make sense to change the name of animation to something containing the "state":

     if( …cssRules[j].name.split("-")[0] == elemId)
         keyframes = styleSheets[i].cssRules[j];
…


var newname = elemId+"-"+thisId;
keyframes.name = newname;
…
el.style.animationName = newname;

(Demo with standard properties and a few bugfixes, updated demo with webkit prefixes)

edited Jun 25 '13 at 17:28

answered Jun 24 '13 at 23:51

Bergi

630,263
148
957
1,375

actually I have the animation set to -webkit-animation:all 0.5s forwards;. I'm afraid that if I set it to infinite the first round of animations will just loop, and won't work for me since the animations will change for every iteration – chrysillo Jun 24 '13 at 23:53
Sorry, I'm not sure what you are asking for then. Where is that "next iteration" in your code that changes the animations? – Bergi Jun 24 '13 at 23:56
on every iteration the variables _from_ and _to_ change with values coming from an array (width,height,top,left). – chrysillo Jun 24 '13 at 23:59
And how are these iterations timed? Or do you just run them together and expect them to be queued as in jQuery? – Bergi Jun 25 '13 at 00:06
Sorry for my poor explanation. They happen onclick, when I click on one item all other items should animate in a certain way, when I click on another item, all shall animate on a different way and so forth. – chrysillo Jun 25 '13 at 00:09
Ahh. And it works only… for the first click? You might also edit these things into the question :-) – Bergi Jun 25 '13 at 00:13
exactly, for the first click – chrysillo Jun 25 '13 at 00:14

score 0 · Answer 2 · edited Jun 25 '13 at 17:33

0

I was able to fix it just by adding a setTimeout(0) to call the animation after the animation name was set to none.

Here's the fixed code http://jsfiddle.net/kR384/3/:

function resetAndRun(o){
    one.style.webkitAnimationName = "none";
    …
    ten.style.webkitAnimationName = "none";
    setTimeout(function(){o.animateBox();}, 0); 
}

I hope it's useful for someone.

edited Jun 25 '13 at 17:33

Bergi

630,263
148
957
1,375

answered Jun 25 '13 at 17:22

chrysillo

732
2
9
17

css3 animation on click with javascript

2 Answers2