Activar la animación CSS3 cuando el contenido se desplaza a la vista

A veces necesita que la animación siempre ocurra cuando el elemento está en la ventana. Si este es tu caso, modifiqué ligeramente el código Matt jsfiddle para reflejar esto.

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    } else {
        $elem.removeClass('start');
    }
}

Para activar una animación CSS, se debe agregar una clase al elemento cuando se haga visible. Como otras respuestas han indicado, JS es necesario para esto y Waypoints es un script JS que se puede utilizar.

Waypoints es la forma más fácil de activar una función cuando se desplaza a elemento.

Hasta Waypoints versión 2, este solía ser un plugin jquery relativamente simple. En la versión 3 y superior (esta guía versión 3.1.1) varias características tienen presentado. Para lograr lo anterior con esto, se puede usar el 'atajo inview' del script:

1. Descargue y agregue los archivos de script desde este enlace o desde Github (la versión 3 no está aún disponible a través de CDNJS, aunque RawGit siempre es una opción también).

2. Agregue el script a su HTML como de costumbre.

   <script src="/path/to/lib/jquery.waypoints.min.js"></script>
   <script src="/path/to/shortcuts/inview.min.js"></script>
   

3. Añadir el siguiente código JS, sustituyendo #myelement por el selector de jQuery de elemento HTML apropiado:

   $(window).load(function () {
       var in_view = new Waypoint.Inview({
           element: $('#myelement')[0],
           enter: function() {
               $('#myelement').addClass('start');
           },
           exit: function() {  // optionally
               $('#myelement').removeClass('start');
           }
       });
   });
   

Usamos $(window).load()para las razones explicadas aquí.

Actualizado el violín de Matt aquí.

Además de estas respuestas, por favor considere estos puntos :

1-Comprobar el elemento en vista tiene muchas consideraciones :
¿Cómo saber si un elemento DOM es visible en la ventana actual?

2-Si alguien quería tener más control sobre la animación (por ejemplo, establecer "el tipo de animación" y "start delay") aquí hay un buen artículo al respecto :
http://blog.webbb.be/trigger-css-animation-scroll /

3-Y también parece esa llamada a addClass sin demora (usando setTimeout ) no es efectiva.

CSS FOR TRIGGER : 
.trigger{
  width: 100px;
  height: 2px;
  position: fixed;
  top: 20%;
  left: 0;
  background: red;
  opacity: 0;
  z-index: -1;
}
<script>
$('body').append('<div class="trigger js-trigger"></div>');

        $(document).scroll(function () {


           $('YOUR SECTIONS NAME').each(function () {

               let $this = $(this);

               if($this.offset().top <= $('.js-trigger').offset().top) {

                   if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
                       $this
                           .addClass('currSec')
                           .siblings()
                           .removeClass('currSec');

                   }
               }

           });

        });
</script>