元素显示上的Css淡出动画

Question

我有这个模板http://t2themes.com/themes/workout/demo和im试图动画一个div的方式，网站动画的每一个元素，文章等，但我找不到正确的代码。如果我使用这个代码：

div.anim { -webkit-animation: flipInX 1.2s 0s ease forwards; -moz-animation: flipInX 1.2s 0s ease forwards; -o-animation: flipInX 1.2s 0s ease forwards; animation: flipInX 1.2s 0s ease forwards; opacity: 0; }

我的div动画，但它在页面加载动画。我想要动画时，它将在屏幕上，如程序部分的演示。另外，我还想在6个div上做这件事，用我的代码它们都是同时动画的，我希望动画像演示中的那样，一次一个。

我怎么能这么做？

Answer 1

当用户滚动到屏幕上的那个位置时，他们使用jQuery加载元素。您需要实现一些jQuery/JS来检测用户在页面上的位置，然后显示元素。

当用户到达这个位置时，他们所做的就是添加一个“动画”类(任意的类名)。

下面的代码片段检测用户何时滚动，如果用户滚动超过500 to，则在ID中添加一个类(在本例中称为“动画”)。

希望这能有所帮助。

<script type="text/javascript">
// <![CDATA[
(function($){
    $(document).ready(function(){
        $(document).scroll(function() {
            if ( $(document).scrollTop() > 500 ) {
                $('#ELEMENTID').addClass('animate');
            }
        })
    });
})(jQuery);
// ]]>
</script>