On the opening of new page have a transition effect run - html

Question

I am designing a website, and for the navigation, it has a transition it goes through, when its hovered over. On hover, it just expands, all of its been done with CSS. I was wondering if there was a way to have the transition effect still occur when you go to a new page, so when you use the navigation and go to a different page on the website, it would be expanded at the start, then transition back to its off hover state.
Heres the HTML
`
Photos And Videos
<nav>
<div id="logo">
<img src="Images/Logo.png" >
</div>
<ul>
<li>
<a href="Index.HTML">
<i class="fa fa-HOME fa-2x"></i> <!--this is using the font awesome icons, reffered to in the head. Multiple divs are used as the websote declared it should be done. Purely used for the icons -->
<span class="nav-text">
HOME
</span>
</a>
</li>
<li>
<a href="standards_&_info.HTML">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
STANDARDS & INFORMATION
</span>
</a>
</li>
<li>
<a href="interesting_info.HTML">
<i class="fa fa-magic fa-2x"></i>
<span class="nav-text">
INTERESTING INFORMATION
</span>
</a>
</li>
<li>
<a href="JOBS.HTML">
<i class="fa fa-briefcase fa-2x"></i>
<span class="nav-text">
JOBS
</span>
</a>
</li>
<li>
<a href="photo_&_video.HTML">
<i class="fa fa-picture-o fa-2x"></i>
<span class="nav-text">
PHOTOS & VIDEOS
</span>
</a>
</li>
</ul>
</nav>
<div class="content">
<div class="center">
<h3>Photos</h3>
</div>
<div class="row">
<div class="wrap">
<img src="Images/placeholder.gif" class="media"alt="Berty">
<div class="discription">
<p>Albert </p>
</div>
</div>
<div class="wrap">
<img src="Images/placeholder.gif" class="media"alt="Berty">
<div class="discription">
<p>Albert </p>
</div>
</div>
<div class="wrap">
<img src="Images/placeholder.gif" class="media"alt="Berty">
<div class="discription">
<p>Albert </p>
</div>
</div>
<div class="wrap">
<img src="Images/placeholder.gif" class="media"alt="Berty">
<div class="discription">
<p>Albert </p>
</div>
</div>
</div>
<hr>
<div class="center">
<h3>Videos</h3>
</div>
<div class="row">
<div class="wrap">
<iframe class="media"
src="https://www.youtube.com/embed/u81CTfbc99c">
</iframe>
<div class="discription">
<p>Green Grass</p>
</div>
</div>
<div class="wrap">
<iframe class="media"
src="https://www.youtube.com/embed/u81CTfbc99c">
</iframe>
<div class="discription">
<p>Green Grass</p>
</div>
</div>
<div class="wrap">
<iframe class="media"
src="https://www.youtube.com/embed/u81CTfbc99c">
</iframe>
<div class="discription">
<p>Green Grass</p>
</div>
</div>
<div class="wrap">
<iframe class="media"
src="https://www.youtube.com/embed/u81CTfbc99c">
</iframe>
<div class="discription">
<p>Green Grass</p>
</div>
</div>
</div>
</div>
<footer>
rueregrewghe
</footer>`
Here's the CSS
html, body{
height:100%;
width:100%;
background: rgb(110, 110, 110);
padding:0;
margin:0;
min-width:1280px;
}
.fa-2x{
font-size:2em;
}
.container{
width: 100%;
height: 100%;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
header{
position:fixed;
margin-left:60px;
width:calc(100% - 60px);
min-width:1400px;
height:108px;
background:rgb(57, 57, 57);
z-index:90;
}
footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:50px;
background:rgb(57, 57, 57);
min-width:1079px;
}
nav {
background:rgb(255, 90, 9);
position:fixed;
top:0;
height:calc(100% - 50px);
min-height:600px;
left:0;
width:60px;
overflow:hidden;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);
float:left;
z-index:100;
}
nav:hover{
width:200px;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);;
}
nav li {
position:relative;
display:block;
width:250px;
}
nav li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#efefef;
font-size: 14px;
text-decoration:none;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);
-ms-transition:all .1s linear;
transition:all .1s linear;
margin-top: calc(100% / 4);
}
nav .nav-icon {
position:relative;
display: table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.nav-text {
position:relative;
display: table-cell;
vertical-align:middle;
width:190px;
font-family: 'Droid Serif', serif;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.content{
float:right;
margin-top:108px;
top:0;
height:calc(100% - 178px);
position:relative;
width:89%;
min-width:1140px;
margin-left:200px;
padding-top:10px;
}
#one-box{
float:left;
width:50%;
height:100%;
min-width:700px;
margin-left: 20%;
background-color:rgb(179, 107, 0);
height:100%;
min-height:600px
}
.two-box{
float:left;
width:calc(( 80% / 2 ) - 10% );
height:100%;
min-width:395px;
margin-left: 10.5%;
}
.three-box{
float:left;
width:calc(( 85% / 3 ) - 6% );
height:100%;
min-width:240px;
margin-left: 6%;
}
.title{
background-color:rgb(179, 107, 0);
height:70px;
margin-bottom:8%;
margin-top:6%;
width:100%:
}
.center{
margin-left:42%;
width:260px;
height:50px;
background-color:rgb(179, 107, 0);
margin-bottom:15px;
}
.centered{
margin-left:43%;
width:260px;
height:70px;
background-color:rgb(179, 107, 0);
}
.row{
display: inline-block;
height:260px;
width: calc( 100% - 64px );
min-width:1300px;
margin-left:64px;
}
.s_row{
display: inline-block;
height:100px;
width: calc( 100% - 64px );
min-width:1300px;
margin-left:64px;
margin-top:20px;
}
.b_row{
display: inline-block;
height:300px;
width: calc( 100% - 64px );
min-width:1300px;
margin-left:64px;
margin-bottom:10px;
}
.media{
width:300px;
height:200px;
border:0px;
}
.wrap{
width:300px;
height:200px;
float:left;
margin-right: calc((100% - 1200px ) / 4);
}
.discription{
width:300px;
height:30px;
margin-top:20px;
background-color:rgb(179, 107, 0)
}
.info{
background-color:rgb(179, 107, 0);
height:75%;
padding-top:10px;
width:92%;
padding-left:4%;
padding-right:4%;
overflow:hidden;
text-overflow:ellipsis;
}
.infos{
background-color:rgb(179, 107, 0);
height:75%;
padding-top:10px;
width:92%;
padding-left:4%;
padding-right:4%;
min-height:530px;
overflow:hidden;
text-overflow:ellipsis;
}
#experiment{
background-color:rgb(179, 107, 0);
height:100%;
width:65%;
}
hr{
margin-top:40px;
margin-bottom:40px;
opacity: 0.0001;
}
.small_box{
width:300px;
height:100px;
background-color:rgb(179, 107, 0);
float:left;
margin-right: calc((100% - 1200px ) / 4);
}
.box{
width:300px;
height:250px;
background-color:rgb(179, 107, 0);
float:left;
margin-right: calc((100% - 1200px ) / 4);
border-radius:0px 0px 30px 30px;
}
.standard{
width:100%;
min-width:100%;
margin-bottom:100px;
border-spacing:0px;
padding:10px;
}
.standard th {
border-bottom:solid #000000;
padding:20px;
background:rgb(179, 107, 0);
height:100px;
}
.standard td {
border-bottom:dashed #000000;
padding: 0px 10px;
height:170px;
min-height:170px;
width:calc(100% / 3);
min-width:500px;
}
.mid {
border:1px;
border-right:solid #000000;
border-left:solid #000000;
}
.involves{
height:135px;
background-color:rgb(179, 107, 0);
width:100%;
margin-top:0%;
}
.small{
height:30px;
background-color:rgb(179, 107, 0);
width:100%;
margin-top:0%;
margin-bottom:14.5px;
}
.small_ind{
margin-top:0%;
height:30px;
margin-bottom:105px ;
background-color:rgb(179, 107, 0);
width:100%;
}
p{
text-align:center;
font-family: 'Times New Roman', serif;
color:white;
font-size:18px;
}
.read_more{
text-align:center;
font-family: 'Times New Roman', serif;
color:#FF6666;
font-size:18px;
opacity:0.8;
}
h1{
font-family: 'Impact', sans-serif;
text-align:center;
font-size:50px;
color:white;
}
h2{
text-align:center;
font-family: 'Cuprum', sans-serif;
font-size:50px;
color:white;
}
h2{
text-align:center;
font-family: 'Cuprum', sans-serif;
font-size:50px;
color:white;
}
h3{
text-align:center;
font-family: 'Times New Roman', serif;
color:white;
font-size:30px;
}
Here's the JSFiddle http://jsfiddle.net/1ztL2kq4/
Sorry, I am unsure of how to add an additional page to the JSFiddle, if that is even possible. All help is appreciated!

Answer 1

If you like jQuery you can try with this
$( document ).ready(function() {
var timeout;
$(someel).hover(
function() {
timeout = setTimeout(function(){
// do stuff on hover
}, 2000);
},
function(){
clearTimeout(timeout);
// do stuff when hover off
}
);
});
But you just need to add check if its not home page. Hope this will help you :)