CODEWITHSUNDEEP
javascriptcsstriggerstransition
TZar
TZar

Reputation: 1

Triggering CSS transitions on page load with delays

So I've successfully tested a css fade-in transition effect of two images using the following Javascript as a trigger so it starts when the page loads (and NOT on hover or click). Now how can I add a 10 second delay to the start of the transition? I was hoping a simple "transition-delay: 10s;" would do the trick but it seems to be getting ignored. I don't want to use key frame animations because it's not compatible with older browsers.

Here's the script:

<script type="text/javascript">
        window.onload = function(){
            document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");
        }
    </script>

Here's my CSS:

      #MountainsBkg1 img {
  width: 2348px;
  opacity: 1;
  position: absolute;
  left: 0;
    -webkit-transition: opacity 3s;
  -moz-transition: opacity 3s;
  -o-transition: opacity 3s;
  transition: opacity 3s;
  transition-delay: 10s;
}

#builder-layout-52bf21c0ea5ff.loaded #MountainsBkg1 img {
  opacity:0;
}

Upvotes: 0

Views: 1191

Answers (1)

That guy
That guy

Reputation: 86

The correct function would be:

window.onload = setTimeout(function(){document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");}),10000)

If you're looking for a javascript only answer for this (that works on everything).

I'm also assuming that this is only going to be applied on the initial load of the page.

Upvotes: 1

Related Questions