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)]);
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');
});
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)
Related
I need to create an animation in CSS that when triggered (in this case by hovering) will not add the property "padding-left: 100%" on the first loop, then once the first cycle of that animation is complete, will add that "padding-left" property, and keep it for all subsequent loops. Any ideas? (I can't use JS at all).
With the following rules:
.container[data-direction="reverse"] .pane[style*="display: none"]{
animation:SlideOutToRight 1s ease;
}
.container[data-direction="forward"] .pane[style*="display: none"]{
animation:SlideOutToLeft 1s ease;
}
The animation runs whenever (a) the data-direction attribute changes and (b) whenever the style becomes display:none. How can I change this code so that the animation only runs when the style becomes display:none but not when the data-direction attribute changes?
Right now, when the direction changes, all of the containers go flying across the screen to the other side because the animation gets applied to all of them when the data attribute changes value.
The data-direction attribute should only control which animation plays, but changes to it's value should not trigger the animation. Is this possible?
Update:
Here is a fiddle of the problem: https://jsfiddle.net/j6ytzbh6/
Expected behavior: The forward button should cause the next sequential box to enter from the right hand side while the current box exists left. The backward button should cause the previous sequential box to enter from the left while the current box exits right. No other box should move or cross the view-port when its not it's turn to move.
Reminder: This is a CSS question, so doing the animation in javascript is cheating. The idea is that Javascript controls functionality (ie a box should be shown or hidden) while css controls presentation (ie. do we make it disappear, fade out or fly to the side). You shouldn't have to re-write your plugin to change the visual way things get shown or hidden.
I have a background image as a map. I want a list of testimonials (absolutely positioned divs) to appear and disappear one after the other on said map. Once all have been shown it needs to repeat.
How would I implement this using css3 animations?
You can use CSS3 animations and by delaying them you can create a full element animation, and then use JS setInterval to restart the animation. This is a commonly used way to do AdWords ads.
A good library with predefined animations is animate.css and you need to calculate the time all animations pass and are complete and set a interval that is removing the class and adding it back every time the animations are done(total time needed for all animations to be completed).
a trick that i like to use is to iterate through each element you wish to show and offset the animation by a length of time * the element index. You could wrap this in a function and call it after time * element array length. This would effectively loop it forever. Some generic code based on half second animations would look like:
function runThrough() {
$('.your-elements').each(function(i,v) {
var current = $(this);
setTimeout(function() {
// do your animation e.g. $(current).fadeIn(500);
}, i * 500);
});
setTimeout(runThrough(), $('.your-elements').length * 500 );
}
I have implemented a CSS3 animation that has a beginning and end state. Once the end state is reached, the animation stops and doesn't repeat. What I need to do is have a "skip to end" link that bypasses the entire animation, but displays that final state. Is it possible to do this via CSS3.
Here's the animated page: http://bit.ly/1csZq2d
Thanks!
Using Javascript only to toggle a class on the container to override the animation in two ways:
Overwrite the animation with a separate animation with the same end result, still setting the end state with animation-fill-mode: forwards;:
http://codepen.io/shshaw/pen/yzhLb
Toggle animation: none and manually add the styles that would be at the end of the animation:
http://codepen.io/shshaw/pen/Jpmkc
The first method might be easier to manage so you just edit all your #keyframes in one place with one just containing the end state. It also has the benefit of just speeding up the animation so that it completes quickly, but still transitions relatively smoothly.
Basically, I have an element with a given width and height. When I add the "zoomed" class to it, I want it to change its size and position. I got it working with a proper webkit-animation (keyframed).
The problem is that when I remove the "zoomed" class, it suddenly reverts to the original size and position, and I'd love to do it with an animation.
Note that this is an example that could probably be solved with the use of the transition property, but in my real world case, it can't because I have a fairly complex keyframed animation.
So, how to have a basic state, animate to a new state when a class is added and reverse the animation to the basic state when the class is removed? Thanks.
The problem that you have wouldn't be solved with a transition.
What makes a transition work in both ways is that usually you set it in a class, and change properties in an state. This way, you have the transition set all the time, and only change the properties.
If you set the transition in the changed state only, once you remove it, the transition is no longer in the element, and so the change is immediate.
If adding the class is really the procedure that you want (for some other reason), the you have 3 posibilities
As suggested in the comment, in the change to the basic state you should add another class that has as only property the animation playing in reverse.
In the base element set the animation in reverse, in the added class set the animation.
Go to an elaborate system where you really remove the class in the animation end event, and what you do triggers that (way too complicated I think)
There is no way that the element is animated - transitioned - whatever once you remove that from the element