html - Animate.css transition only when website loads -

for transitions on 1 of websites use animated.css. works fine except when apply transition on navbar, every time change page (clicking item on navbar), transition runs again.

i run transition when website loads/reloads. not when change page.

is there way accomplish plain css? or need implement javascript code?

snippet of code:

<div class="col-xs-6 col-xs-offset-3 col-sm-2 col-sm-offset-1">     <header id="masthead" class="site-header" role="banner">         <div class="top-header animated fadeindown">             <nav class="navbar navbar-primary" role="navigation" id="navigation">             //...             </nav>         </div>     </header> </div> 

you can use session-only cookie in javascript.

include following script @ bottom of page:

<script> if (document.cookie.indexof('siteloaded=loaded') < 0) {      [... activate animation ...]      document.cookie = "siteloaded=loaded"; } </script> 

when site first loads, check see if session-only cookie exists.

if cookie not exist, activate animation , set cookie.

if cookie exists, not activate animation.

when visitor closes site tab, session-only cookie deleted.

---

additional reading:

thanks mohit bhardwaj tip, below.

if want try html5 client-side-only storage solution more up-to-date , more powerful (faster performing, fewer server round-trips, greater capacity etc.) using session cookie, might check out window.sessionstorage property:

https://developer.mozilla.org/en/docs/web/api/window/sessionstorage