I need help in preventing my HTML from flickering. I have a component for fade-in-out animation which uses React Transition. Sometimes I see a flickering effect on Chrome. In Safari everything works well. I tried to add -webkit-backface-visibility: hidden; and some more solutions found in Google but everything led me to failure. Do you have any ideas?
Codepen
Video with the flickering effect.
If you what it to constantly fade in and out I would put it on a loop. I got into Flickr by constantly clicking the button, that is because when you click it so fast It starts the fade in and fade out and fade in all at the same time. I got it to stop flickering by waiting until it finishes the animation. The reason it works on safari because it will not let two of the same animations run at the same time, what I mean by that is that if fade-in and fade-in were to run at the same time it would not let the last one run but if you ran fade-in and fade-in-2 at the same time you would have the flicker effect in safari.
If you what to fix the problem:
1. If the purpose of the fade in and out is to do one and then the other then tell the code to not start the fade-out animation until the animation fade-in finishes.
2. If the purpose of the fade in and out is to constantly change back and forth then add a loop to the code.
Like this:
animation-iteration-count: infinite;
Add this to your styling.
Related
I'm doing some tests with the animeJS animation library (www.animejs.com) and I'd like to use it for changing an image for another when the user moves the mouse over some div elements in the page. Also, I'd like to swap the images with a nice fade-out/fade-in effect. You can see an example in this fiddle: https://jsfiddle.net/n5c5rgjo/3/
If you try it, you'll see that it works fine until you move the mouse from one div to the other while the animation is being played. To avoid a flickering effect in this case, I added a 'lock' (animLock variable in the code) to allow only one animation at a time. This creates another problem, because the image is not updated properly.
Could someone show me a better way of dealing with this problem? Thanks!
Ad this CSS
img{
transition: all 0.8s;
}
img:hover{
opacity:0.1;
transition: all 0.8s;
}
How do i make a specific image on code.org, which is in javascript, blink, Im making a simple game where you click a ball and it moves around the screen, but i also want to make it blink so the ball disappears and comes back again, I know you can do it with texts but I have a button, that is an image and cant seen to figure it out.
Nowadays you probably would use CSS animations for running simple animations like blink effects and use Javascript to initiate the animation. Something like what's mentioned here should do the trick:
Imitating a blink tag with CSS3 animations
Just toggle the class to start/stop the animation.
I have a webpage with a bunch of WowJS animations. The animations occur when I scroll down, which is fine. However, when I scroll back up, the animations occur again. How can I disable the animations occurring more than once?
When you scroll back up it, it will not do a animation again default behaviour of WowJs. WowJs library does not provide functionality like when you scroll back up animation will apply.(means wowJs Reset option is not available.animation never apply more than once in wowJs Library).
This is a really weird problem:
I have a circle that keeps rotating indefinitely with CSS rotate transition, to keep it rotating indefinitely I am using jquery to keep changing the rotate value every 30 sec to a bigger value. I found this to be smoother visually than full CSS solutions.
Yet I have noticed that css transition behaves like this:
It stops even if the transition is not finished when window > tab > page > element has another tab active or if the window is minimized.
So jquery goes on, but the transition stop, making the rotation increase in speed. Stopping the jquery function that increase the rotation when the tab is not focused helps, but not solves the problem entirely because in scenarios where the element is "visible" but the tab is not focused (think of the tab opened but another program is active above the browser, or another window of the browser is open maybe in a tile) the transition keeps going but the jquery timer stops, making the circle stop itself eventually.
Why are you using a transition for this?
#yourElement {
animation:spin 10s linear;
-webkit-animation:spin 10s linear;
}
#keyframes spin {
from {transform:none}
to {transform:rotate(360deg)}
}
#-webkit-keyframes spin {
from {-webkit-transform:none}
to {-webkit-transform:rotate(360deg)}
}
This will animate smoothly and flawlessly, even with tab switches.
Perhaps you can use a background task to refresh the CSS. Check out this thread: Execute Background Task In Javascript
Hi to everyone this is my first ask on stackoverflow
I've created a simple code to manage a menu. Here is the code.
http://jsfiddle.net/corvallo/97x89/5/
If I click on "gestione news" all the menu elements will slide left with different delay
and an image (that on jsfiddle u can't see) with the text "Articoli" will appear.
So i click on the image and the text "articoli" will fadeOut and the menu elements will reappear with delay in the same position as before.
So the problem is that if I try for 4-5 times the first animation(that is the sliding left of the menu elements) will slowdown, and if I try again animation will be slower and slower.
I don't that the problem is in the delay() functions but in the $.each(), maybe I'm wrong.
Can someone help me with this.
Thank you in advance.
The animations seem to somewhat be still running for a while after they have apparently done their job. Use the following to see when they stop in Firebug or Chrome:
$(this).animate({"marginLeft":"0px"},"slow", function(){console.log("anim stopped");});
I am not sure why they are still running, but you can stop them before running new animations like this:
$(this).stop().animate({"marginLeft":"0px"},"slow");
This seems to fix the slowdown issues that you are experiencing.
Put your menu in a div. Instead of doing a foreach on each element, animate the main div.
Delay should not be causing your issue as all that does is wait to begin the animation timing, but having that many animations going at once is starting several internal timers instead of just one, which could lead to hiccups.