捕获滚动事件

这需要使用JavaScript或jQuery来捕获滚动事件，并在每次触发滚动事件时检查元素是否在视图中。
一旦元素进入视图，就开始动画。在下面的代码中，这是通过向元素添加一个“start”类来完成的，该类触发动画。
Updated demo

超文本标记语言

<div class="bar">
    <div class="level eighty">80%</div>
</div>

中央支助组

.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

jQuery软件

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

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

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

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

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

有时候你需要动画总是在元素在视口中的时候出现。如果你是这种情况，我稍微修改了Mattjsfiddle代码来反映这一点。
jQuery语言

// 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');
    }
}

为了激活一个CSS动画，当元素可见时需要添加一个类，正如其他答案所指出的，JS是必需的，Waypoints是可以使用的JS脚本。
航点是在滚动到元素时触发功能的最简单方法。
在Waypoints版本2之前，这是一个相对简单的jquery插件。在版本3和更高版本（本指南版本3.1.1）中，引入了几个特性。为了实现上述功能，可以使用脚本的'inview shortcut'：
1.从this link或Github下载并添加脚本文件（版本3是not yet available到CDNJS，尽管RawGit也始终是一个选项）。
1.像往常一样将脚本添加到HTML中。

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

1.添加以下JS代码，将#myelement替换为相应的HTML元素jQuery选择器：

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

我们使用$(window).load()的原因已在here中说明。
更新了马特的小提琴here。

您不再需要捕获滚动事件

自2020年以来，每个浏览器都能够通知元素是否在视口中可见。
与交叉口观察员。
我在这里张贴代码：https://stackoverflow.com/a/62536793/5390321

除了这些答案外，请考虑以下几点：
1-检查视图中的图元有许多注意事项：
How to tell if a DOM element is visible in the current viewport?
2-如果有人想对动画有更多的控制（例如设置“* 动画类型 ”和“ 开始延迟 *”），这里有一篇关于它的好文章：
http://blog.webbb.be/trigger-css-animation-scroll/
3-而且，没有延迟地调用addClass（使用setTimeout）似乎也没有效果。

触发器的CSS：

<style>
    .trigger{
      width: 100px;
      height: 2px;
      position: fixed;
      top: 20%;
      left: 0;
      background: red;
      opacity: 0;
      z-index: -1;
    }
</style>
<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>