CODEWITHSUNDEEP
htmlcss
RunLoop
RunLoop

Reputation: 20376

Animate opening of link in webpage

I have a several links in my HTML. When a link is clicked, I would like the new page to appear using a fade in/cross-dissolve animation. I have read a bit about CSS animations, but not sure if this is achievable. Any help would be appreciated please.

Upvotes: 0

Views: 540

Answers (1)

Davsket
Davsket

Reputation: 1308

You can try this (and don't forget to load the styles at the head):

html{
    opacity: 1;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 500ms;
}

html.hide{
    opacity: 0; 
}

the HTML

<html class='hide'>
...
</html>

and the with JS:

window.onload = function(){document.getElementsByTagName('html')[0].className = '';}

Upvotes: 1

Related Questions