如何仅在元素滚动到视图中时触发 CSS3 动画？

滚动时触发 CSS3 动画

问题：

在内容滚动到视图之前加载动画条形图，导致错过了

解决方案：

滚动到视图时激活 CSS3 动画：

1.捕获滚动​​事件

实现监视滚动事件的 JavaScript 或 jQuery 事件侦听器。

2.检查元素可见性

对于每个滚动事件，检查元素（条形图）在用户视口中是否可见。

3.开始动画

元素变得可见（例如，当isElementInViewport()）返回true时），通过应用适当的CSS类（例如，“start”）来启动动画.

示例代码：

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

<!-- CSS -->
.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) {
    // Calculate element and viewport positions
    // ...

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

function checkAnimation() {
    $elem = $('.bar .level');

    // Prevent redundant animation start
    if ($elem.hasClass('start')) return;

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

$(window).scroll(function(){
    checkAnimation();
});

以上是如何仅在元素滚动到视图中时触发 CSS3 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！