Prevent reloading CSS3 animation
Many people need to restart their CSS3 animations; Well, I want the exact opposite:
If I start the animation by adding the correct css class, the animation starts; If I then sort my container using a series of calls to parentNode.insertBefore (and reusing the same node instances), the animations are restarted every time.
Is there anything I can do to prevent this behavior?
Here is a script showing this behavior: http://jsfiddle.net/v66G5/17/
Click Add All, let the animation play for a few seconds, then click Shuffle: any node you moved restarted the animation.
container.insertBefore(node, childrenClone[Math.floor(Math.random() * childrenClone.length)]);
source to share
Why manipulate DOM elements when you can shuffle your CSS positions?
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');
});
source to share
Taken from http://dev.w3.org/csswg/css3-animations/
The animation specified on the element by changing the style after the document has loaded will start when the style is resolved. It could be immediately in the case of a pseudo style rule such as a hang, or it could be when the scripting engine returns control to the browser (in the case of a style applied by the script).
Animation is applied to an element if the element has a value for the 'animation name' that refers to the correct keyframe rule. Once the animation has started, it continues until it ends or the animation name is removed. The values used for keyframes and animation properties are instantly cleared when the animation starts. Changing them while the animation is running has no effect
Removing and inserting nodes forces the elements to recalculate the style, so I don't think what you want is possible with simple css.
A possible way to achieve this with jQuery is to take a snapshot of the opacity and time to the end of the animation when the node is removed, and set it after insertion (i.e. for animation 10 seconds after 5s, if click was selected start at 50% opacity, animation duration is 5 seconds)
source to share