I have moving line animation, powered by CSS:
.line {
transition: all 30s cubic-bezier(0, 0, 0, 1);
transform: translate3d(-1000px, 0px, 0px);
}
The line is moving 30 seconds to -1000px on X axis.
The problem:
When I switch browser tabs to the other websites, animation on the tab with this animation could set on pause, but when I return back to the tab with this animation, animation resumed.
The behavior I need:
I need to make animation move constantly without pausing, when user switch the browser tabs.
I do not think that is possible with just CSS. For optimization purposes inactive browser tabs or windows are not redrawn. You could however use JavaScript to count how many frames have passed using real time and Page Visibility API to skip to the correct frame.
If I understood you correctly, then you need to continue the animation after the user has left the current tab of the browser. The visibilitychange event will help with this. I have made the usual example code below, but you need to customize this code for your task.
I also specified line.style.animationPlayState = 'running' - it is in this place of the condition that the logic of the animation continues.
let line = document.querySelector('.line');
document.addEventListener("visibilitychange", function() {
if (document.visibilityState == 'hidden') {
line.style.animationPlayState = 'running';
} else {}
});
Related
I'm having a react project.
When users reach a page, they don't realize there are more options only if they scroll down.
So I want to automatically scroll vertically in a smooth way, on page load to show users all the options they have.
What is the way to achieve this in react?
I would suggest 2 ways.
First is to transition the entire page with animation on load.
CSS
body{
animation: scrollUp 1s;
}
#keyframes scrollUp {
from {transform: translate(1000px)}
to{transform: translate()}
}
Second would be to set window.scroll value manually on page load to lets say 1000 or whereever you want and then use window.scroll to smoothly scroll to top.
Before first render (maybe use requestAnimationFrame)
window.scrollTo(1000, 0)
Then on next frame
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
https://css-tricks.com/snippets/jquery/smooth-scrolling/
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!
First timer here, I installed Lightbox and it is running brilliantly.
Buttons are not visible normally, but when i hover the where it should be, buttons becomes visible.
You have to check your lightbox.css file. By default Lightbox hides the controls. In the css you will see lines where the opacity is set to zero. So what you might be looking for is something like the following.
.lb-prev, .lb-next {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); //change to 100%
opacity: 0; //change to 100%
}
Since you say you say your a first timer I would recommend going through the CSS file and where you see something recarding the opacity change it saved it and check what it did, till you get the result you want.
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.
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)