我想知道如何处理页面过渡，因为我对它们还很陌生。
我想在这些关于codrops的演示中使用这些元素之外的随机过渡：https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/
问题是，我在youtube上观看的教程都只使用一个.html文件。我的结构有些不同，具有多个.html文件（联系人，图库）等，并且具有一种CSS样式
这是我的html文件。我尝试按照codrops上的步骤进行操作，但最终出现白屏。有人对此有任何经验吗？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="Style.css"/>
<title>Untitled Document</title>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="Index.html">Domov</a>
<a href="Gallery.html">Galéria</a>
<a href="Contact.html">Kontakt</a>
<a href="Aboutme.html">O mne</a>
</div>
<script>
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div id="first">
<ul>
<li><a href="#" id="up" onClick="openNav()" >Menu</a></li>
</ul>
<div id="block">
<h2>Filip Ducký</h2>
<p id="desc">Portfoilo</p>
<br><br><br><br><br><br><br>
<a href="#" class="tlacitko">Moje Práce</a>
</div>
</div>
<div id="second">
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>Grafik</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>Webové stránky</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>3D</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
</div>
<div id="third">
<div class="am1">
<img src="Img/Info_dark.png" class="am2" alt="">
<h3 id="omne">O mne</h3>
<p class="am3">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</div>
<br><br><br>
<a href="#" class="tlacitko2">Kontakt</a>
<br><br><br><br>
</div>
<footer>
<div id="left">
<p id="fot"> © 2017</p>
</div>
<div id="right"><a href="#up"><img id="arrow" src="Img/arrow.png" alt=""></a></div>
</footer>
</body>
</html>
我想在页面之间进行转换。主页-画廊，画廊-联系人等。如果帖子中内容不清楚，我表示歉意。
最佳答案
尝试以下CSS：
#mySidenav{
transition: all 500ms;
}
这是
transition的快速格式transition: <Properties to apply on> <duration>;duration可以位于ms或s中检查以下代码段：
#mySidenav {
position: absolute;
width: 0;
left: 0;
height: 100%;
background: white;
overflow: hidden;
transition: all 500ms;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="Style.css" />
<title>Untitled Document</title>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="Index.html">Domov</a>
<a href="Gallery.html">Galéria</a>
<a href="Contact.html">Kontakt</a>
<a href="Aboutme.html">O mne</a>
</div>
<script>
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div id="first">
<ul>
<li><a href="#" id="up" onClick="openNav()">Menu</a></li>
</ul>
<div id="block">
<h2>Filip Ducký</h2>
<p id="desc">Portfoilo</p>
<br><br><br><br><br><br><br>
<a href="#" class="tlacitko">Moje Práce</a>
</div>
</div>
<div id="second">
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>Grafik</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.
Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom
ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>Webové stránky</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.
Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom
ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>3D</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.
Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom
ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
</div>
<div id="third">
<div class="am1">
<img src="Img/Info_dark.png" class="am2" alt="">
<h3 id="omne">O mne</h3>
<p class="am3">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.
Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom
ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</div>
<br><br><br>
<a href="#" class="tlacitko2">Kontakt</a>
<br><br><br><br>
</div>
<footer>
<div id="left">
<p id="fot"> © 2017</p>
</div>
<div id="right">
<a href="#up"><img id="arrow" src="Img/arrow.png" alt=""></a>
</div>
</footer>
</body>
</html>