body {
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEX4+Pj09PQf/c7fAAAAGklEQVR4Xq3MIQEAAADDIPqX/kvMIMEWEm8O7b0/wewc/NcAAAAASUVORK5CYII=) repeat;
}

.block {
  height: 5em;
  line-height: 5em;
  width: 10em;
  background: #464646;
  color: #fdfdfd;
  text-align: center;
  margin: 1em auto;
  text-shadow: 0 0 1px #333; /* so one can see fadeBgColor properly */
}

.animatable {
  /* initially hide animatable objects */
  visibility: hidden;

  /* initially pause animatable objects their animations */
  animation-play-state: paused;
}

/* show objects being animated */
.animated {
  visibility: visible;

  animation-fill-mode: both;
  animation-duration: 1s;
  animation-play-state: running;
}

/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@keyframes fadeIn {
  0%,
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    transform: translateX(20px);
  }
  80% {
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    transform: translateX(-20px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fadeBgColor {
  0%,
  70% {
    background: none;
  }
  100% {
    background: #464646;
  }
}

.animated.animationDelay {
  animation-delay: 0.4s;
}
.animated.animationDelayMed {
  animation-delay: 1.2s;
}
.animated.animationDelayLong {
  animation-delay: 1.6s;
}
.animated.fadeBgColor {
  animation-name: fadeBgColor;
}
.animated.bounceIn {
  animation-name: bounceIn;
}
.animated.bounceInRight {
  animation-name: bounceInRight;
}
.animated.bounceInLeft {
  animation-name: bounceInLeft;
}
.animated.fadeIn {
  animation-name: fadeIn;
}
.animated.fadeInDown {
  animation-name: fadeInDown;
}
.animated.fadeInUp {
  animation-name: fadeInUp;
}
.animated.moveUp {
  animation-name: moveUp;
}

// Trigger CSS animations on scroll.
// Detailed explanation can be found at http://www.bram.us/2013/11/20/scroll-animations/

// Looking for a version that also reverses the animation when
// elements scroll below the fold again?
// --> Check https://codepen.io/bramus/pen/vKpjNP

jQuery(function($) {
  
  // Function which adds the 'animated' class to any '.animatable' in view
  var doAnimations = function() {
    
    // Calc current offset and get all animatables
    var offset = $(window).scrollTop() + $(window).height(),
        $animatables = $('.animatable');
    
    // Unbind scroll handler if we have no animatables
    if ($animatables.length == 0) {
      $(window).off('scroll', doAnimations);
    }
    
    // Check all animatables and animate them if necessary
    $animatables.each(function(i) {
       var $animatable = $(this);
      if (($animatable.offset().top + $animatable.height() - 20) < offset) {
        $animatable.removeClass('animatable').addClass('animated');
      }
    });

  };
  
  // Hook doAnimations on scroll, and trigger a scroll
  $(window).on('scroll', doAnimations);
  $(window).trigger('scroll');

});