CODEWITHSUNDEEP
csscss-transitions
AlexG
AlexG

Reputation: 4045

Prevent CSS3 Animation from restarting

A lot of people need to restart their CSS3 animations; Well I want the exact opposite:

If I start an animation by adding the proper css class, the animation starts; If I then sort my container using a series of parentNode.insertBefore calls (and reusing the very same node instances), the animations restart every time.

Is there anything I can do to prevent this behavior?

Here's a fiddle showing this behavior: http://jsfiddle.net/v66G5/17/

Click on Add all, let the animation plays for a few seconds then click shuffle: Any node that moved has its animation restarted.

container.insertBefore(node, childrenClone[Math.floor(Math.random() * childrenClone.length)]);

Upvotes: 3

Views: 1076

Answers (2)

eithed
eithed

Reputation: 4320

Taking from http://dev.w3.org/csswg/css3-animations/

An animation specified on an element by modifying the style after the document has loaded will start when the style is resolved. That may be immediately in the case of a pseudo style rule such as hover, or may be when the scripting engine returns control to the browser (in the case of style applied by script).

An animation applies to an element if the element has a value for ‘animation-name’ that references a valid keyframes rule. Once an animation has started it continues until it ends or the ‘animation-name’ is removed. The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect

Removing and inserting nodes causes the elements to recalculate the style, so I don't think what you want is possible by simple css.

A possible way to achieve it using jQuery, would be to take a snapshot of opacity and time left till the end of animation when removing the node, and setting it back after inserting it (ie. for 10s animation, after 5s if shuffle was clicked, start from 50% opacity, with the duration of the animation at 5s)

Upvotes: 1

Evgeny
Evgeny

Reputation: 6290

Why manipulate DOM elements, when you can shuffle their CSS positions instead?

http://jsfiddle.net/v66G5/19/

children.each(function() {
    var $node = $(this),
        $node2 = $(children[Math.floor(Math.random() * children.length)]),
        tmp = $node.position().top;

    $node.css("top", $node2.position().top + 'px');
    $node2.css("top", tmp + 'px');
});

Upvotes: 1

Related Questions