Background color changing it's height onload

Question

I've been reading for couple hours from now, and probably I have problem even with asking right question. What I would like to achieve is: changing the main page background height from 0 to 100% in let's say 10s, so after 1 second background color got 10% page height, after 2 seconds 20% of page height and so on. It should start to change after page load. It could be jquery, css, or some external library, just want it to work.

Answer 1

Something like this?

body {
  width: 100vw;
  height: 100vh;
  position: relative;
  &::before {
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    background: red;
    height: 0;
    z-index: 0;
    animation-fill-mode: forwards;
    animation-name: expand;
    animation-duration: 10s;
  }
}

@keyframes expand {
    from { height: 0; }
    to { height: 100%; }
}

So basically, you add another layer underneath your content, which animates to the height of your page for 10s (the animation-duration)

Working JSFiddle: https://jsfiddle.net/y4kpcmjc/2/

Answer 2

From the official jquery docs

The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

Here is the example

<img id="image" src="..." />
...
<script>
$(document).ready(function() {
    $('#image').css('height', '0');
    $('#image').animate({
        height: "100%"
    }, 10000, function() {
       //Finished loading
    });

})
</script>