Reply To: CSS-animation should begin after page is fully loaded.

[Atelierbram]

There might be a problem with the loading of assets on your site, hard to tell from here what is causing this, but I can see the small javascript function in the head of the page, but somehow this never kicks in on the html-element (when I inspect in DevTools).

Since you are using jQuery, one way to get around this would be to set the class on the HTML-element inside a jQuery document ready event like:

   $(document).ready(function() {
     $('html').addClass('document-ready');
    }); 

But regardless, this is essential, in the CSS you have to split the animation property values out in the declaration block (can’t use the short-hand now for you want the css-animation only to kick in after page-load)

.st0 {
  fill-opacity: 0;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation-iteration-count: 1;
  animation-duration: 7s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
 /* is animation-delay really needed now? */
  animation-delay: 5s;
}

So on the document ready event the css-animation kicks in:

.document-ready .st0 {
  animation-name: draw;
}