Scroll Event and CSS3 Animations

Listening for scroll event

if(window.addEventListener) {
 window.addEventListener('scroll', scrollHandler, false);
} else {
  window.attachEvent('onscroll', scrollHandler);
}

Getting Percentage Scroll Position

var ratio = document.body.scrollTop / (document.body.scrollHeight - document.body.clientHeight) * 100;

Add Remove Classes on Element

element.classList.add('classname');
element.classList.remove('classname'); 

element.classList.toggle('classname');
element.classList.contains('classname'); // returns bool
element.classList.add('foo', 'bar');

// Supported on modern browsers; support from IE10 up

classList Shim

Define Animation Keyframes

@keyframes show {
  0% {
    opacity: 0;
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    animation-timing-function: linear;
  }
}

0% or from 100% or to

Define Animation Property

.element .in {
  animation: show .5s linear 0s 1 normal forwards;
}

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Detecting Transition and Animation End

References: