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
Related
So bacically I made some elements, animated them with CSS and added some functionalities with JS. Here's a jsfiddle version of it:
https://jsfiddle.net/weeznismen/4frt72s3/
Right now I'm struggling with slowing down the animation when user hovers over inner circle or a displayed text. Right now, the CSS property
animation-duration
changes on hover to larger number so it slows down and when cursor leaves it, it changes back to original, to speed up again. The problem is it's snappy and I'm trying to achieve a smooth transition from slowed down animation to sped up and vice versa. Any ideas?
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.
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;
}
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).
i like to have a nice transition while i change the content of my ngView. The user can always change the active view faster than the animation. Is there a way to always get an smooth fade out/in animation. The only way that is visible to seems to ignore fadeout/leave.
Plunker Link
Try this http://plnkr.co/edit/NO0Xqh?p=preview.
With JavaScript controlled animation, it will make sure when user clicks faster than the animation, the value animation stop in the middle and reverse back to initial states.