CSS Animations Template

by James Connolly

HTML

<div id="container">
  <div class="animated fadeIn">First animation on page load</div>
  <div>No Animation</div>
  <div class="animatable fadeIn">Fade In</div>
  <div class="animatable fadeInUp">Fade Up</div>
  <div class="animatable fadeInDown">Fade Down</div>
  <div class="animatable fadeInLeft">Fade Left</div>
  <div class="animatable fadeInRight">Fade Right</div>
</div>

CSS

/*--------------------------------------------------------------
# Base Classes
--------------------------------------------------------------*/

.animatable {
  visibility: hidden;
  animation-play-state: paused;
}

.animated {
  visibility: visible;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-play-state: running;
}

/*--------------------------------------------------------------
# Animation Classes
--------------------------------------------------------------*/

/****spin****/

/****fade in****/

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/****fade in up****/

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/****fade in down****/

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform:...

JavaScript

(function($) {

    /* Every time the window is scrolled ... */
    $(window).scroll(function() {

      /* Generic classes to dd to content */
      $('.animatable').each(function(i) {

        var $rowElement = $(this);
        var bottom_of_object = $rowElement.offset().top + 100;
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        $rowElement.css("opacity", "0");

        if (bottom_of_window > bottom_of_object) {
          
          if ($rowElement.hasClass('animatable')) {
            $rowElement.removeClass('animatable').addClass('animated');
          }
        }
      });
    });

})(jQuery);