animate.css: How do you have the css animation work only the first time?

Question

I'm using animate.css and the animation occurs every time i refresh or return from another page; how do i make it so that once the index.html is visited, and I go to another .html or refresh the page, the li does not occur again?

index.html
<div id="sidebar" class="col-sm-3 col-md-3">
  <nav id="sidebar-nav">
    <ul>
      <li><a id="side-post" class="animated bounceInLeft" ui-sref="timeline">Timeline</a>
      <li><a id="side-post" class="animated bounceInLeft" ui-sref="skills">Skills</a>
      <li><a id="side-post" class="animated bounceInLeft" ui-sref="personal_interests">Interests</a>
    </ul>
  </nav>

style.css 
#side-post {
 animation-delay:0.7s;
 -moz-animation-delay:0.7s;
 -webkit-animation-delay:0.7s;
}

score 1 · Answer 1 · edited May 23 '17 at 11:44

I don't think there is a proper way that you can make the animation run for the first time but not when you're back from another page or refreshing. If you do that, you may not see the animation neither when you re-open the webpage.

If you have to implement this, try to store a 'timestamp' in the local storage so that you can allow the animation run after a while, eg 5 minutes later.

var now = Date.now();

if ('lastOpened' in localStorage) {
  if (now - localStorage.lastOpened > 5 * 60 * 1000) { // 5 mins
    Array.prototype.slice.call(document.querySelectorAll('.side-post')).forEach(function(el){
      el.classList.add('animation'); // add `animation` class to each `li` element implement the animation 
    })
  }
} else {
  localStorage.lastOpened = now;
}

Also, you should assign the same id to only one element, use class instead. Check out this post - Difference between id and class in CSS and when to use it for more details.

animate.css: How do you have the css animation work only the first time?

1 Answers1