如何启动CSS3动画当它在视口 [英] How to start CSS3 animation when it is in view port

问题描述

我有与CSS3动画和动画当前激活的页面加载的柱状图。

I have a bar chart that animates with CSS3 and the animation currently activates as the page loads.

由于条形图是不是在视图时页面加载，你就必须向下滚动才能看到它和你给它的时间，动画已经加载。
所以，我所要做的是，有CSS3动画激活，当有人使用JS滚动到它。

Since the bar chart isn't in view when page loads, you'd have to scroll down to see it and by the time you get to it, the animation has already loaded. So what I am trying to do is, have the CSS3 animation activate when someone scrolls to it by using js.

下面是什么，我试图做一个样本：

Here is a sample of what I am trying to do:

jsfiddle.net

我想我错过了什么或做一些错误的.js和.css。

I think I am miss something or doing something wrong in .js and .css.

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

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

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

感谢你们提前！

推荐答案

这是我如何做到这一点：

this is how i do it:

function isElementInViewport(){
            var scrollTop = $(window).scrollTop();
            var viewportHeight = $(window).height();
            $('.skiller #skill:not(.html5)').each(function(){
                var top = $(this).offset().top;
                if(scrollTop + viewportHeight >= top ){
                    $(this).addClass('html5');
                }
            });
        }
$(isElementInViewport);
$(window).scroll(isElementInViewport);

这篇关于如何启动CSS3动画当它在视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！