مشکل با css animate

[iFire]

شما باید کاری کنید که انیمیشن زمانی شروع بشه که المان مربوطه تو دید کاربر هست یا اصطلاحا تو view port هست
برای راحتی کار از کتابخونه زیر استفاده کنید که قابلیت تشخیص view port رو هم داره
http://jackonthe.net/css3animateit/
موفق باشید...

[mojtaba05]

شما باید کاری کنید که انیمیشن زمانی شروع بشه که المان مربوطه تو دید کاربر هست یا اصطلاحا تو view port هست
برای راحتی کار از کتابخونه زیر استفاده کنید که قابلیت تشخیص view port رو هم داره
http://jackonthe.net/css3animateit/
موفق باشید...

سلام، از این پلاگینی که آدرس دادید من نتونستم استفاده کنم، یه پلاگین مشابه بود که برای من کار کرد:
https://github.com/protonet/jquery.inview

و یک روش هم بدون استفاده از پلاگین و با آزمون و خطا تونستم درست کنم:

$(document).ready(function(){

    $(window).on('scroll', function(){
        
        //اول مقدار اسکرول از بالا را در یک متغیر ذخیره می کنیم
        
        var scrollTop     = $(window).scrollTop(),
        //بعد مقدار فاصله عنصر از بالای پرونده (و نه صفحه نمایش) رو در یک متغیر ذخیره می کنیم
            
            elementOffset = $('.element').offset().top,
        // دو متغیر قبل رو از هم کم می کنیم که حاصلش مساوی است با فاصله عنصر ما از بالای صفحه یا همون ویوپورت
              
            distance      = (elementOffset - scrollTop),
        //ارتفاع صفحه نمایش یا همون ویوپورت رو در یک متغیر ذخیره می کنیم
             
            height = $(window).height();
    
        // حالا شرط می کنیم که اگر فاصله بالای عنصر ما تا بالای ویوپورت کمتر از ارتفاع ویوپورت شد، کار دلخواه ما رو انجام بده
        
        if(distance < height){
            
            // کاری انجام بده
        
        }
    });
});

یه دموی آنلاین ساختم می تونید ببینید:
http://jsfiddle.net/sabeti05/3qc7ujx0/