I'm using animate.css for doing some animations. If an error occurs, the element should bounce:
$target.addClass('animated bounce');
That's working well. But if the user is doing the same thing, there won't be a second animation, as the classes are already added.
So I try to remove the classes after the animation like this:
$target.addClass('animated bounce');
setTimeout(function(){
$target.removeClass('animated bounce');
}, 1000);
My question is, if this is how it should be done (I don't know how long the animation is exactly), or is there another solution for repeating animations?
You need to do this:
$('#target').removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
$('#target') is in this case the ID of your element, change this to your needs.
there is a shorter solution , you have to 'refresh' the animated element each time
function refreshElement(id){
var el = $(id);
el.before( el.clone(true) ).remove();
}
and that way you can run an animation on that element again
Run on mouse enter AND exit:
$target.stop().toggleClass('animated bounce');
the animation class is added & removed based on the mouse's hover (enter/exit) action. The class will not be left active after exiting the item.
The .stop() will stop the animation from repeating multiple times if someone hovers/exits many times before an animation is complete.
Related
For my project I wrote a pure CSS hover menu. When the page loads the menu (#drop) waits for a few seconds before moving up, out of view. You can get the menu back by hovering over a different element (#hover) at the top of the page.
It works perfectly for me, but there is one issue. When you load the page, and you remain hovered over #hover, #drop moves up for a moment after it has finished waiting and moves back down in a glitchy manner.
You can experience it yourself here: https://jsfiddle.net/27mbnpwk/
Just run the script and put your cursor on the text, wait a couple of seconds and see it jump.
Is there a way to make the menu only go up if you're not hovering over #drop with pure CSS? Or, otherwise, with js?
I could not find a way with pure CSS, but there is an easy solution with jquery (thanks to #LinkinTED):
Two CSS classes, one for the menu being down, one for the menu being up:
.down{
transform: translate(0,00%);
}
.up{
transform: translate(0,-175%);
}
Then in javascript you create a function that initiates after the page is loaded. This function waits 3 seconds and subsequently adds the up class to the element, pushing it up, out of view. And a function that changes the class each time #hover is hovered over:
window.onload = function() {
setTimeout(
function(){
$('#drop').removeClass('down').addClass('up');},
3000);
};
$('#hover').hover(
function() {
// mouse in
$('#drop').removeClass('up').addClass('down');
},
function() {
// mouse out
$('#drop').removeClass('down').addClass('up');
}
);
Test it here:
https://jsfiddle.net/g9oq0124/1/
I would love to hear it if anyone does find a pure css, or cleaner way to do this!
I have a .gif that is animated to begin from the left of the screen to a few hundred pixels to the right. The animation lasts 5 seconds and I have set it so it doesn't return to its initial spot.
What I want is for the .gif to start once the CSS animation is finished. I realise that some forums give codes for a mouseover effect so that it changes from a .jpg source of the animation to the .gif. But I can't find anything that gives you a timer instead of mouseover.
It's been a few years since I've worked on websites and I've forgotten so much, so this has been a struggle.
Any help is appreciated. Cheers.
The way to change an <img> source via javascript is fairly simple, the syntax looks like img.src = "new/source.gif".
Having the change to a GIF match up with the end of your animation can be achieved a variety of ways, but I would do it by adding the animation to your element as a class at the same time you set a time out in your javascript.
HTML
<img id="image" src="path/to/static.jpg">
JAVASCRIPT
var img = document.getElementById("image");
function photoSwitch(){
// begin your CSS animation by applying class
img.setAttribute("class", "some-animation");
// have javascript wait 5s before switching the image source
setTimeout(function(){
img.src = "path/to/moving.gif";
},5000);
}
photoSwitch();
I'm trying to use CSS transforms to make the center object in a carousel have more focus/attention. (Carousel is Slick.js)
Everything works great, except when I go from the last item back to the first item, there is a pause and a jump before the change appears.
What is causing this? How do I fix it?
https://jsfiddle.net/6d91cqoq/1/
//pseudo code
EDIT: It also happens going from the first to the last.
EDIT 2:
It's worth noting I took the idea from the Slick.js website: http://kenwheeler.github.io/slick/
On the page with the 'Center Mode' example, it is using transforms to do this exact thing. I cannot for the life of me figure out what is different, other than the target element.
EDIT 3: I did attempt to change my elements to H3 elements, as is in the sample. No change.
The cause for this is that Slick changes the DOM order of the slide elements when switching from "first to last". The transition doesn't kick in when dom elements are removed and added back... You can work around this by playing around with javascript and Slicks beforeChange and afterChange events instead of a pure CSS solution. I have made an example, although the example I made also slightly changes the effect (the center slide won't widen until it is in the center, e.g. afterChange). Maybe with Slicks, next and previous slide parameters you can make it work like your example, didn't have time to investigate it more.
https://jsfiddle.net/6d91cqoq/2/
Changes made to your example:
//Added my own "active" class, so it does not to interfere with slicks active class
.slick-slide.active {
opacity: 1;
transform: scale(1.50);
}
JS
//make current center active after initialization
$('.slick-center').addClass('active');
//before slide change, make all "inactive"
$('.center').on('beforeChange', function(event, slick, index){
$('.slick-slide').removeClass('active');
});
//after change make the center one "active"
$('.center').on('afterChange', function(event, slick, index){
$(slick.$slides[index]).addClass('active');
});
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 );
}
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)