HTML 5 Page Transitions

HTML 5 page transitions

index.htm:

<html>
<head>

<style>
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; }

#mainframe.normal
{
    opacity: 1.0;
}
#mainframe.faded
{
    opacity: 0.0;
}
#mainframe
{
        /* Firefox */
        -moz-transition-property: opacity;
        -moz-transition-duration: 3s;
        /* WebKit */
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 3s;
        /* Standard */
        transition-property: opacity;
        transition-duration: 3s;
}

</style>

<script language="javascript">
function change()
{
    document.getElementById('mainframe').className="faded";
    setTimeout(function()
    {
        document.getElementById('mainframe').src='page2.htm';
        document.getElementById('mainframe').className="normal";
    }, (2 * 1000));
}
</script>
</head>

<body style="background-color:black;">
<iframe id="mainframe" class="normal" src="page1.htm"></iframe>
</body>

</html>

page1.htm

<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page1

<button onclick="parent.change();">
click me
</button>

</body>
</html>

page2.htm

<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page2
</body>
</html>

How to do transition effects between two html pages

Here is a solution that requires some knowledge of CSS and Javascript:

In your DOM, where you put your links to the other pages, instead of using <a> tags, use an ordinary <span> and attach an onclick attribute, like this:

<span onclick="transitionToPage('https://www.google.com')"></span>

(You can use <a> and href, but you need to parse out the target href and prevent the default event.)

Then in your Javascript, put this code:

window.transitionToPage = function(href) {
    document.querySelector('body').style.opacity = 0
    setTimeout(function() { 
        window.location.href = href
    }, 500)
}

document.addEventListener('DOMContentLoaded', function(event) {
    document.querySelector('body').style.opacity = 1
})

Finally, in your CSS code:

body { 
   opacity: 0;
   transition: opacity .5s;
}

This will have the following effect:

When page loads, the body will fade in over half a second
When you click on a link, the body will fade out and after half a second the browser will go to the next page

Happy coding!

How To Add CSS3 Transition With HTML5 details/summary tag reveal?

In addition to Volomike's answer, it would be possible to change margin-left to transform: translateX() for performance reasons.

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

CSS Transition between nearly identical pages

It will require some JavaScript or JQuery.

HTML

<a id="homeLink">Home</a>
<a id="aboutLink">About</a>

<p id="targetHome">This is the home Paragraph...</p>
<p id="targetAbout" class="hidden">This is the about Paragraph...</p>

$(document).on("click", "#aboutLink", function(e){
    e.preventDefault(); //Prevent the <a> element from redirecting
    $("#targetHome:visible").hide("fade", 300, function(){
       $("#targetAbout:hidden").show("fade", 300); //Show About Paragraph if hidden
    });
});

$(document).on("click", "#homeLink", function(e){
    e.preventDefault(); //Prevent the <a> element from redirecting
    $("#targetAbout:visible").hide("fade", 300, function(){
       $("#targetHome:hidden").show("fade", 300); //Show Home Paragraph if hidden
    });
});

Preloading HTML5 video for smooth AJAX page transitions

Thanks to Bart.

var loaded = false;

//If the video is loaded...
example.addEventListener("canplaythrough", function() {

  //Make sure it only fires once
  if (loaded == false) {
    loaded = true;

    //Fade in the content
    $('#wrapper').fadeIn(2500);

  }
});

Smooth page transitions in HTML5 with CSS3 without using jquery

Face it: You're going to have to use JavaScript, and it'll be very tedious without using some framework or other. To get smooth page transitions, you have two options:

1) Run the site as a single page. That is what is used in the site you link to. The whole thing has no page transitions; it's all one page with some click events used to animate the content and load it dynamically with AJAH.

2) Run a multi page site, but using local storage. You would have a small number of pages, and cache the resources needed for them. The JavaScript would run instantly when the page was loaded, and draw a nice load screen while the ordinary content was loaded and displayed by AJAX.

Personally, I wouldn't be too concerned about page transitions; it's just how websites work. Don't be put off by jQuery either, because by the time you've written all this JavaScript you will be wanting it. Even for mobile sites, the size of the library is just about acceptably small (you can use a CDN-cached copy).

HTML 5 Page Transitions