Éléments CSS3-Animate s'ils sont visibles dans la fenêtre (défilement de page)

Question

J'ai ajouté des animations CSS à divers éléments div sur ma page html, mais toutes les animations jouées en même temps et je ne peux pas voir les animations en bas de la page. Comment puis-je les faire jouer pendant que je fais défiler la page ?

Answer 1

Vous devrez utiliser [~ # ~] js [~ # ~] ou jQuery pour déclencher votre transition/animation CSS3
une fois l'élément dans la fenêtre d'affichage **.

démo jsFiddle - Utilisation du plugin inViewport

écouter les événements load, resize et scroll pour obtenir si un élément est entré dans la fenêtre d'affichage.
Vous pouvez utiliser un petit plugin jQuery que j'ai construit: ( https://stackoverflow.com/a/ 26831113/383904 )

Disons que vous avez des boîtes qui s'animent comme:

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

que dans votre CSS, vous avez:

.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); }

où le .triggeredCSS3 sera assigné dynamiquement par le plugin:

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