Переходы страницы HTML 5

Я хочу сделать приятные, современные взгляды на переходы между страницами. Я нашел этот учебник: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

Автор использует JQuery, чтобы заставить его работать, но я хочу сделать это в чистом HTML5. Есть ли функция HTML5 для этого, скажем, в CSS?

UPDATE

В конце 2014 года я хотел бы добавить следующий комментарий. Прежде чем делать это, подумайте дважды, не лучше ли сделать одностраничное веб-приложение AJAX с переходами CSS3 между DIV. Вопрос описывает очень особенную ситуацию, которая крайне редка. В остальных 99% случаях лучшим решением является одностраничное приложение.

Ответ 1

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>

Ответ 2

Это основано на правильном ответе, опубликованном выше, что очень помогло мне. К сожалению, он не работал у меня в chrome/linux, он отлично работал в firefox. В любом случае, я искал что-то немного другое, потому что мне нужен общий заголовок на всех страницах. Итак, вот мое решение adatped.

<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">-->
<script>
function change(page)
{
//  document.write('Hello World');
    document.getElementById('mainframe').className="faded";
    setTimeout(function()
    {
        document.getElementById('mainframe').src=page+'.html';
        document.getElementById('mainframe').className="normal";
    }, (2 * 1000));
}
</script>
</head>

<body style="background-color:black;">
    <header id="header">
        <h2 id="name">
            FRANCISCO</br>
            FRANCHETTI
        </h2>
        <nav id="pages">
            <ul id="list-nav">
                <li class="current"><a onclick="change('home')" href="#">HOME</a></li>
                <li><a onclick="change('research')" href="#">RESEARCH</a></li>
                <li><a onclick="change('teaching')" href="#">TEACHING</a></li>
                <li><a onclick="change('contact')" href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>
    <iframe id="mainframe" class="normal" src="home.html"></iframe>
</body>

</html>

Основные замечания:

На страницах не нужно иметь кнопки или что-то еще, здесь обработчик это заголовок, который является общим для всех страниц.
Атрибуты href отключены, потому что мы не хотим действительно перемещаться, просто запомните src для iframe.
Теперь функция change() принимает параметр page, который используется для определения загружаемой страницы; как говорилось ранее, вместо этого передачи адресата для a в атрибуте href, мы передайте его как аргумент функции для change().