jquery - JavaScript: addClass when element is in viewport using animate.css -

i using animate.css nice , simple beginner. can animation work , can delay animation animation-duration: 3s , animation-delay: 0s; can't find how trigger when comes viewport scroll down it. here code have tried far:

html

<div class="about-container">          <p>content here...</p>      </div> 

css

.about-container{     background-color: #a3c17f;     width: 500px;     height:500px;     margin: 0 auto;     } 

javascript

$(function() {    if ($("#about-container").length > 0) {       addclass('animated pulse')    } });        </script> 

look @ element. using class. should $('.about-container'). can change id.

$(function() {    if($('#about-container').length > 0) { // check if there's element       $('#about-container').addclass('animated pulse'); // how add class in jquery    } });  

plain javascript

var abtcontainer = document.getelementbyid('about-container');  if(abtcontainer.length > 0) {     abtcontainer.classlist.add('animated pulse');  } 

however method don't work on ie8 , below.

so need use if supporting old browsers.

abtcontainer.classname += ' animated pulse'; 

http://codepen.io/anon/pen/qerzpz