Coordinate the timing of CSS animation with the loading of the page

Question

Coordinate the timing of CSS animation with the loading of the page

Despite the abundance of similar questions, none have quite addressed my specific query. I've created a preloader using CSS animation and I want it to synchronize perfectly with the page load. While I can trigger the animation on page load, I'm struggling to control its duration in order to match the exact timing of the page load, even if it's incredibly fast.

For reference, here is an example: http://jsfiddle.net/RgPU7/

I aim for the 'filling' effect to mirror the time taken for the page to load.

Currently, I am simply applying a delay and fadeout effect to the modal containing the CSS animation.

jQuery(window).load(function(){
  $(".modal").delay(3000).fadeOut(1000);
});

Any suggestions or insights would be greatly appreciated. Thank you!

javascript jquery css

Answer 1

Answer №1

If you need to pause a function, here are some options:

setTimeout(function() { your_function(); }, 5000);

Alternatively, you could try something like the following example:

$(this).fadeOut(500, function(){
   //Perform an action
   $(this).fadeIn(700);
});

I hope these suggestions prove useful.

Answer 2

If you need to pause a function, here are some options:

setTimeout(function() { your_function(); }, 5000);

Alternatively, you could try something like the following example:

$(this).fadeOut(500, function(){
   //Perform an action
   $(this).fadeIn(700);
});

I hope these suggestions prove useful.

Coordinate the timing of CSS animation with the loading of the page

Answer №1

Similar questions

Is Eslint functioning in just one Sublime Text project?

Vanilla JavaScript - Conceal all remaining div elements

Experiencing difficulties with a cross-domain jQuery/AJAX service request

The fusion of Combining Forms, JSON, AJAX, PHP, and Google graphs

How can one utilize Codemirror code folding while avoiding the use of "[ ]"?

We apologize for the inconvenience, but please address the upstream dependency conflict before proceeding. You may also choose to use the --force or --legacy-peer

What is the most efficient way to organize JSON data in a tree structure using JavaScript?

Failure to trigger Ajax callback function

When using `console.log`, the object is displayed correctly. However, an error occurs when

Exploring vuelidate: demonstrating personalized validation messages alongside pre-built validators

DirectionsLight isn't functioning properly in Three.js

Avoid triggering the onClick event on multiple submit buttons when the form data is deemed invalid by vee-validate

What is the mechanism by which Redux sends state to mapStateToProps?

What is the best method for saving a chosen radio button into an array?

Error: Unable to locate font in the VueJS build

Having trouble getting a div to slide to the left on hover and collapse on mouseout using Jquery?

Check to see if the property of the object does not exist within the array and update as

Retrieve the present time of an ongoing CSS3 animation

Using CSS to duplicate images in multiple repetitions horizontally

Activate the button when a checkbox is ticked or when using the "select all" checkbox