CSS3-Görünüm öğeleri görünüm penceresinde görünürse (Sayfa Kaydırma)

Question

html sayfamdaki çeşitli div öğelerine CSS animasyonları ekledim.Ama tüm animasyonlar aynı anda çaldı & altta animasyonları göremiyorum Sayfayı aşağı kaydırırken onları nasıl oynatabilirim?

Answer 1

Sen ** tetiğe sizin CSS3 geçiş/animasyon
eleman görüntü kapısında hale geldikten sonra JS veya jQuery kullanmanız gerekir. Bir öğe Görünüm girdiyseniz

jsFiddle demo - Using inViewport plugin

load, resize ve scroll olayları dinlerken olsun. Sahip CSS'nizde daha

<div class="box rotate"></div> 
<div class="box scale"></div> 
<div class="box translate"></div> 

: Diyelim ki gibi animasyon kutuları var diyelim (https://stackoverflow.com/a/26831113/383904)

:
Sen kurduğum küçük jQuery eklentisi kullanabilirsiniz

.box{ 
    width:300px; 
    height:300px; 
    margin:500px 50px; 
    background:red; 
    transition: 1.5s; /* THE DURATION */ 
} 

.rotate.triggeredCSS3 {transform : rotate(360deg); } 
.scale.triggeredCSS3  {transform : scale(1.6); } 
.translate.triggeredCSS3 {transform : translate3d(400px,0,0); } 

.triggeredCSS3, eklenti tarafından dinamik olarak atanacaktır:

$(".box").inViewport(function(px){ 
    if(px) $(this).addClass("triggeredCSS3") ; 
});