CSS-animation should begin after page is fully loaded. - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

June 21, 2016 at 1:12 am #243025

Participant

I have animation (#svg_tag, .st0). After animation complete, then fades-in the image (.logo_svg). I want that animation begins after page is fully loaded (both animation and image).

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
<style> 
.logo_svg {
  max-width: 80%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  animation-name: show;
  animation-delay: 11s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
    body{
        background-color: grey;
    }
#svg_tag {
  max-width: 80%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.st0 {
   fill-opacity: 0;
  stroke: #fff;
  stroke-width: 1;
   stroke-dasharray: 1350;
  stroke-dashoffset: 1350;
  animation: draw 15s linear;
  animation-delay: 5s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;

  }
}
@keyframes show {
  to {
    opacity: 1;
  }
} </style>

</head>

<body>

<svg version="1.1" id="svg_tag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 708.7 437.3" style="enable-background:new 0 0 708.7 437.3;" xml:space="preserve">
<path id="XMLID_13_" class="st0" d="M708.7,285c-18.6,18.6-47.7,21.9-70,7.9v102.3l70,42V285z"/>
<path id="XMLID_12_" class="st0" d="M595.6,113.1l-113.1,67.9v7.5H509V245c0,16.6,13.4,30,30,30s30-13.4,30-30v-56.5h26.5v113.1
    h-26.5v-8.6c-9,5.6-19.4,8.6-30,8.6c-31.2,0-56.5-25.3-56.5-56.5v56.5l129.6,77.8V188.5h26.5v8.6c22.3-14,51.4-10.7,70,7.9v-24.1
    L595.6,113.1z"/>
<circle id="XMLID_11_" class="st0" cx="669" cy="245" r="30"/>
<path id="XMLID_10_" class="st0" d="M242.7,188.5h-9.9V245c0,25.7-20.9,46.6-46.6,46.6s-46.6-20.9-46.6-46.6v-56.5h-9.9V245
    c0,31.2,25.3,56.5,56.5,56.5c18.6,0,36.1-9.2,46.6-24.5v24.5h9.9V188.5z"/>
<polyline id="XMLID_9_" class="st0" points="279.2,188.5 259.3,188.5 259.3,198.4 269.2,198.4 269.2,301.6 279.2,301.6 279.2,188.5 
    "/>
<path id="XMLID_8_" class="st0" d="M259.3,123c0-5.5,4.4-9.9,9.9-9.9s9.9,4.4,9.9,9.9s-4.4,9.9-9.9,9.9S259.3,128.5,259.3,123
    L259.3,123z"/>
<rect id="XMLID_7_" x="295.7" y="113.1" class="st0" width="9.9" height="188.5"/>
<path id="XMLID_16_" class="st0" d="M425.4,0v213c-17.7-25.7-52.9-32.3-78.6-14.6c-25.7,17.7-32.3,52.9-14.6,78.6
    c17.7,25.7,52.9,32.3,78.6,14.6c5.7-3.9,10.7-8.9,14.6-14.6v24.5h9.9V0H425.4z M378.8,291.6c-25.7,0-46.6-20.9-46.6-46.6
    s20.9-46.6,46.6-46.6s46.6,20.9,46.6,46.6S404.5,291.6,378.8,291.6z"/>
<path id="XMLID_15_" class="st0" d="M103.1,213c-17.7-25.7-52.9-32.3-78.6-14.6c-5.7,3.9-10.7,8.9-14.6,14.6V0H0v301.6h9.9V277
    c17.7,25.7,52.9,32.3,78.6,14.6C114.3,273.9,120.8,238.7,103.1,213z M56.5,291.6c-25.7,0-46.6-20.9-46.6-46.6s20.9-46.6,46.6-46.6
    s46.6,20.9,46.6,46.6S82.3,291.6,56.5,291.6z"/>
</svg>

<img src="logo.png" class="logo_svg" alt="" />  

</body>
</html>

June 21, 2016 at 2:04 am #243026

Paulie_D

Member

Load the CSS for the animation at the bottom of the page?

Or use Javascript?

https://css-tricks.com/transitions-only-after-page-load/

June 21, 2016 at 2:38 am #243027

Atelierbram

Participant

Using the javascript function in the demo here; it sets a class name on the HTML-element on page-load. In the CSS we can use this like so:

.is-loaded .st0 {
  animation-name: draw;
}

http://codepen.io/atelierbram/pen/jrVNjX

June 24, 2016 at 11:34 pm #243135

anvar.erkinov

Participant

@Atelierbram I’ve tried what you said. It seems it doesn’t work. Animation ends before page is fully loaded.

Look what I’ve tried.
http://buildup01.businesscatalyst.com/index.html

June 24, 2016 at 11:52 pm #243136

anvar.erkinov

Participant

@Paulie_D Tried your way too. Still doesn’t work.

June 25, 2016 at 2:34 am #243137

Atelierbram

Participant

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;
}

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.