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

What is the best way to position this sidebar on the right instead of the left?

Getting the click event object data from a dynamically created button with jQuery or JavaScript

Both the client and server sides are in sync with the latest data, yet the rendering fails to display the recent updates

Learn the process of creating test cases using `ava` for the following code snippet

Node.js tutorial: Building routes with regex and implementing redirects

Using JavaScript to insert a value through AJAX

Converting PHP date format to JavaScript date format

Having trouble with a switch statement in Javascript that is unable to find a case for "none."

Encountering a 404 error when translating URLs in Next.js i18n?

The function putImageData does not have the capability to render images on the canvas

Exiting a NodeJs function entirely rather than just returning from an internal function

Ways to verify the identity of a user using an external authentication service

Error displaying Font Awesome icons

The jQuery calendar malfunctions on desktop devices but functions properly on mobile devices

The error message indicates that the HTTP status code "600" is not a recognized response after an ajax submission

`How can I activate caching for getServerSideProps in Next.js?`

Issue with setting a cookie on a separate domain using Express and React

What is the best way to align a button with the edge of an image?

Issue with Swiper js "autoheight" not resizing correctly for the height of the first slide upon page initialization

Improving JavaScript Functions: Minimize duplication of helper methods