I'm trying to create a function with a callback that will execute at the end.
Basically I'm adding a css class to a div that will animate it, and want to remove that div when the animation terminates. This is how I'm doing it :
this.animate = function(cssClass, callback) {
$(div).addClass(cssClass);
callback();
}
And when calling this function :
this.animate('animated', function () {
$(div).remove();
}
However, I noticed that the div got removed before the animation fires.
EDIT : here is the css class :
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
#-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
#-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.animated.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
-webkit-animation-duration: 0.25s;
-moz-animation-duration: 0.25s;
-o-animation-duration: 0.25s;
animation-duration: 0.25s;
}
EDIT : (solution)
I solved this problem using the one() method as follows :
$(div).one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
// code to execute after animation ends
$(this).remove();
});
Hope it can help others facing the same problem.
I recommend you to use a jQuery animation function, which has a complete event callback you can hook up when the animation completes. Pass a set of CSS rules over your animation function.
this.animate = function(cssRules, callback) {
$(div).animate(cssRules, 1000, "linear", function() {
console.log('animation completed');
callback(); //executes your callback here
});
}
cssRules are the rules defined in your argument cssClass; it would look like:
{
height: 200,
width: 400,
opacity: 0.5
}
Start with something easy; change only one css rule e.g. font-size or height. There may have a way to animate on the basis of a css class, Google it, you never know.
See the documentation at the very end of the page (about the complete callback): http://api.jquery.com/animate/
Hope this helps,
R.
Related
I'm trying to animate a list of elements to slide in one after the other when rendered into the page.
Everything works well in Chrome and Firefox, even in Safari 11 work well, but safari 12 is not doing the animation well.
As shown in the following image, all items should be aligned to the top when the animation is completed, but for some reason only in Safari 12, the items are randomly rendered. In addition to that, the mouse over on the button is off.
You can take a look at the problem here: https://codepen.io/crysfel/pen/GwoQxE (Make sure to open the link with safari 12)
I think the css is pretty standard:
#keyframes slideIn {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-in {
opacity:0;
transform: translateY(60px);
animation: slideIn ease 1;
animation-fill-mode: forwards;
animation-duration: 175ms;
}
And a simple javascript to animate the items one after the other:
function animateIn() {
$('ul li').each(function(index) {
$(this).removeClass('slide-in');
setTimeout(() => {
$(this).addClass('slide-in');
}, 50 * index)
})
}
$(() => {
animateIn();
$('#show').click(function() {
animateIn();
});
});
EDIT:
I've fixed the issue: It turns out all I had to do was removing transform: translateY(60px); from slide-in. Apparently safari was using that style at the end of the animation overwriting the final value. It's very weird, because visually looks wrong but the active zones and all are fine.
You probably need to add a prefix to keyframes and animation for safari. Use something like this:
#keyframes slideIn {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#-webkit-keyframes slideIn {
from {
opacity: 0;
-webkit-transform: translateY(60px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
}
}
.slide-in {
opacity:0;
transform: translateY(60px);
-webkit-transform: translateY(60px);
animation: slideIn ease 1;
-webskit-animation: slideIn ease 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-duration: 175ms;
-webkit-animation-duration: 175ms;
}
A helpful tool to use is shouldiprefix.com
I've used one template from W3 Schools in order to build a theme with Bootstrap for WordPress
http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
One feature is the animation to slide some elements within a div in the webpage as you scroll it, using jQuery.
Currently the animation is implemented only from bottom to top, but I'm struggling to implement from right to left and vice versa as well.
Here is the code already working for bottom to top animation:
jQuery(function($) {
$(window).scroll(function () {
$(".slideanim-bottom").each(function () {
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
});
.slideanim {
visibility: hidden;
}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
<div class="row slideanim-bottom">
Does anyone know how to implement the same thing for left to right and vice versa as well? I think it is just a matter of adding some code in the js.
Thanks!
Just change translateY to translateX like this:
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
With code above you will get animation from right to left.
If you want animation from left to right than set negative percentage.
For example: -webkit-transform: translateX(-70%);
Also, because you do horizontal animations there will be visible horizontal scroller while animation plays so you should set overflow:hidden for your cointainer. In your case it is .container-fluid class.
You can see full example on your template page here: https://jsfiddle.net/uzxbn9da/
Have you tried changing translateY to translateX?
This would most likely modify the movement from top-down to left-right. You would have to tweak the percentage values to achieve the desired effect though.
Like this:
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
Having some trouble building a CSS3 loader using keyframe animations.
The loader consists of 4 boxes that animate going up and down. The issue I'm having is that when the animation is supposed to stop, the boxes jump to the initial position. The behaviour I'm looking for is: loader is animating infinitely until loading is done, at which point it should animate to the initial position and stop, sort of like having animation-iteration-count: infinite and changing it to animation-iteration-count: 1 to stop the animation. (which doesn't work btw).
See this fiddle to see what I mean: https://jsfiddle.net/cazacuvlad/qjmhm4ma/ (when clicking the stop button, the boxes should animate to the initial position, instead of jumping)
The basic setup is:
<div class="loader-wrapper"><span></span><span></span><span></span><span></span></div>
To start the loader, I'm adding a loader-active class that contains the animation to the loader-wrapper.
LESS:
.loader-wrapper {
&.loader-active {
span {
.animation-name(loader);
.animation-duration(1200ms);
.animation-timing-function(ease-in-out);
.animation-play-state(running);
.animation-iteration-count(infinite);
&:nth-child(1) {
}
&:nth-child(2) {
.animation-delay(300ms);
}
&:nth-child(3) {
.animation-delay(600ms);
}
&:nth-child(4) {
.animation-delay(900ms);
}
}
}
}
I've tried adding the animation to the spans in the loader-wrapper class w/o loader-active and playing around with animation-iteration-count and animation-play-state when loader-active is added without any luck.
Found a pretty simple workaround. Still not pure CSS, it involves a bit of JS, but it works well.
Updated fiddle: https://jsfiddle.net/cazacuvlad/qjmhm4ma/2/
What I did was to move the loader-active class to each span (instead of the wrapper), listen to the animationiteration event on each span and stop the animation then.
$('.loader-wrapper span').on('animationiteration webkitAnimationIteration', function () {
var $this = $(this);
$this.removeClass('loader-active');
$this.off();
});
This basically stops the animation at the very end of an iteration cycle.
Updated LESS
.loader-wrapper {
span {
&.loader-active {
.animation-name(loader);
.animation-duration(1200ms);
.animation-timing-function(ease-in-out);
.animation-play-state(running);
.animation-iteration-count(infinite);
&:nth-child(1) {
}
&:nth-child(2) {
.animation-delay(300ms);
}
&:nth-child(3) {
.animation-delay(600ms);
}
&:nth-child(4) {
.animation-delay(900ms);
}
}
}
}
You can also add a class which specifies the iteration count to stop the infinite loop. The advantage of this approach is that you can change the duration and timing-function which can be nice for easing out some animation (Like a rotating logo for example).
.animate-end {
animation-iteration-count: 3;
animation-duration: 1s;
animation-timing-function: ease-out;
}
We can add this class with js and it will now stop the animation at count 3.
document.querySelector(".loader-wrapper").classList.add("animate-end");
But you can also end the current itertion by counting it and change the style of the element dynamcly with Js.
let iterationCount = 0;
document.querySelector(".loader-wrapper span").addEventListener('animationiteration', () => {
//count iterations
iterationCount++;
});
yourElement.style.animationIterationCount = iterationCount + 1;
Here is a demo with your code:
document.querySelector("#start_loader").addEventListener("click", function(){
document.querySelector(".loader-wrapper").classList.add("loader-active");
})
let iterationCount = 0;
document.querySelector(".loader-wrapper span").addEventListener('animationiteration', () => {
//count iterations
iterationCount++;
console.log(`Animation iteration count: ${iterationCount}`);
});
document.querySelector("#stop_loader").addEventListener("click", function(){
//For some animation it can be nice to change the duration or timing animation
document.querySelector(".loader-wrapper").classList.add("animate-end");
//End current iteration
document.querySelectorAll(".loader-wrapper span").forEach(element => {
element.style.animationIterationCount = iterationCount + 1;
});
//Remove Classes with a timeout or animationiteration event
setTimeout(() => {
document.querySelector(".loader-wrapper").classList.remove("loader-active");
document.querySelector(".loader-wrapper").classList.remove("animate-end");
}, 1200);
})
#-moz-keyframes 'loader' {
0% {
-moz-transform: translate3d(0, 0, 0);
}
50% {
-moz-transform: translate3d(0, -10px, 0);
}
100% {
-moz-transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes 'loader' {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, -10px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
#-o-keyframes 'loader' {
0% {
-o-transform: translate3d(0, 0, 0);
}
50% {
-o-transform: translate3d(0, -10px, 0);
}
100% {
-o-transform: translate3d(0, 0, 0);
}
}
#keyframes 'loader' {
0% {
transform: translate3d(0, 0, 0)
}
50% {
transform: translate3d(0, -10px, 0)
}
100% {
transform: translate3d(0, 0, 0)
}
}
.loader-wrapper {
margin-bottom: 30px;
}
.loader-wrapper.loader-active span {
-webkit-animation-name: loader;
-moz-animation-name: loader;
-ms-animation-name: loader;
-o-animation-name: loader;
animation-name: loader;
-webkit-animation-duration: 1200ms;
-moz-animation-duration: 1200ms;
-ms-animation-duration: 1200ms;
-o-animation-duration: 1200ms;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.loader-wrapper.animate-end span {
/* Works great for some animations */
/*animation-iteration-count: 1;*/
/*animation-duration: 1s;*/
}
.loader-wrapper.loader-active span:nth-child(1) {}
.loader-wrapper.loader-active span:nth-child(2) {
animation-delay: 300ms;
}
.loader-wrapper.loader-active span:nth-child(3) {
animation-delay: 600ms;
}
.loader-wrapper.loader-active span:nth-child(4) {
animation-delay: 900ms;
}
.loader-wrapper span {
margin-right: 5px;
display: inline-block;
vertical-align: middle;
background: black;
width: 10px;
height: 10px;
}
<div class="loader-wrapper"><span></span><span></span><span></span><span></span></div>
<button id="start_loader">Start</button>
<button id="stop_loader">Stop</button>
I have a problem with the animated text on my website. I am using the following CSS to do the animations:
#-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes fadeInRightBig {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
#-o-keyframes fadeInRightBig {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
#keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
-moz-animation-name: fadeInRightBig;
-o-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
When .fadeInRightBig is applied to a text element it becomes blurry in Chrome as seen in the following picture. The first element has not the animation applied. Maybe it is a little hard to see due to the resizing of the image.
As far as i know this problem only exists in Chrome. In Firefox and IE the animated text is crisp.
I have tried to recreate the problem in a Fiddle (http://jsfiddle.net/DTcHh/2608/). However in this Fiddle it does not seem to be a problem.
My website is located here: http://steffanlildholdt.dk/.
Anyone having idea to what the problem can be?
On the elements that appear blurred, apply the following styles:
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
I've been trying to learn css animations and I'm starting to get a grip on them but I'm having an issue an animation effect. I have an animation class assigned to a section that is a download button when I click it the animation plays for the extent of the click, if i click and hold it plays the whole animation. I want the animation to play all the way through on on click, not a click and hold.
Heres the Html section the class is applied to:
<a href="software/ASC.exe">
<section id="download" class="animated" title="Download ASC">
Download
</section>
</a>
Here is the CSS animation class:
.animated {
}
.animated:active {
-webkit-animation:fadeOutUp 2s;
-moz-animation:fadeOutUp 2s;
-o-animation:fadeOutUp 2s;
-ms-animation:fadeOutUp 2s;
animation:fadeOutUp 2s;
box-shadow:3px 1px 20px 4px #0099CC;
}
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
#-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
#-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
Any help is appreciated!
HTML
<a href="#" id="buttonLink">
<section id="download" class="animated" title="Download ASC">
Download
</section>
</a>
CSS
.clicked {
-webkit-animation:fadeOutUp 2s;
-moz-animation:fadeOutUp 2s;
-o-animation:fadeOutUp 2s;
-ms-animation:fadeOutUp 2s;
animation:fadeOutUp 2s;
box-shadow:3px 1px 20px 4px #0099CC;
}
JavaScript
var el = document.getElementById('buttonLink');
el.addEventListener('click', function(){
document.getElementById('download').className = 'clicked';
})
DEMO
You could do it with jQuery
DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/1/
$("#download").click(function () {
$(this).addClass("animated1");
});
To reset the animation just remove the class after 2 seconds
DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/4/
$("#download").click(function () {
$(this).addClass("animated1");
setInterval(function () {
$("#download").removeClass("animated1");
}, 2000);
});
** EDITED**
Just for the challenge, here's a CSS only option using :target
DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/2/
A demo that uses javascript to add that 'animated' class. Anyone knows a way to do that from CSS (kinda' impossible though :D)? It'd be interesting. Plunk here http://plnkr.co/edit/IhkmgKQ9Od0dyb3HFuEv?p=preview
window.onload = function() {
var btn = document.getElementById("download");
btn.addEventListener("click", function(e) {
this.className = "animated";
});
}
You can archieve this in pure CSS by using :not(:active) instead of just .active.