web-dev-qa-db-fra.com

Animations CSS avec délai pour chaque élément enfant

J'essaie de créer un effet en cascade en appliquant une animation à chaque élément enfant. Je me demandais s'il y avait une meilleure façon de le faire que celle-ci:

.myClass img:nth-child(1){
    -webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(2){
    -webkit-animation: myAnimation 0.9s linear 0.1s forwards;
}
.myClass img:nth-child(3){
    -webkit-animation: myAnimation 0.9s linear 0.2s forwards;
}
.myClass img:nth-child(4){
    -webkit-animation: myAnimation 0.9s linear 0.3s forwards;
}
.myClass img:nth-child(5){
    -webkit-animation: myAnimation 0.9s linear 0.4s forwards;
}

et ainsi de suite ... Donc en gros, j'aimerais avoir une animation à partir de chaque enfant mais avec un retard. Merci pour toute contribution!

Addition: Peut-être que je n'ai pas correctement expliqué quelle était ma préoccupation: il s'agit de savoir comment faire cela, peu importe le nombre d'enfants que j'ai. Comment faire cela sans avoir à écrire les propriétés de chaque enfant ... par exemple, quand je ne sais pas combien d'enfants il y aura.

cssanimationcss3delaycss-selectors
55
Seka

Ce que vous voulez, c'est la propriété animation delay .

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.myClass img {
  float: left;
  margin: 20px;
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}

.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }
<div class="myClass">
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
</div>

Un préprocesseur CSS tel que Less.js ou Sass peut réduire la quantité de répétition, mais si vous travaillez avec un nombre inconnu d'éléments enfants ou devez animer une grande alors JavaScript sera la meilleure option.

51
CherryFlavourPez

Voici une façon scss de le faire en utilisant une boucle for.

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}
34
robshearing

Dans un avenir proche, espérons-le, lorsque attr et calc seront entièrement pris en charge, nous pourrons le faire sans JavaScript.

HTML:

<ul class="something">
    <li data-animation-offset="1.0">asdf</li>
    <li data-animation-offset="1.3">asdf</li>
    <li data-animation-offset="1.1">asdf</li>
    <li data-animation-offset="1.2">asdf</li>
</ul>

CSS:

.something > li
{
    animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}

Cela créerait un effet où chaque élément de la liste s'anime dans ce qui semblerait être un ordre aléatoire.

18
Steven Vachon

Vous pouvez également utiliser la propriété transition-delay en CSS et utiliser JS ou JQuery pour affecter un délai différent pour chaque élément enfant. (Supposons que s soit le délai de démarrage en secondes)

$(".myClass img").each(function(index){
     $(this).css({
          'transition-delay' : s*(1+index) + 's'
     });
 });

Ainsi, les enfants auront les délais de transition comme 1 * s, 2 * s, 3 * s ..... et ainsi de suite. Maintenant, pour créer l'effet d'animation réel, définissez simplement la transition requise et les enfants seront animés dans une séquence. Fonctionne comme un charme!

17
Adk96r

Si vous avez beaucoup d'éléments (par exemple: j'ai paginé un tableau avec> 1000 éléments et je veux que chaque ligne soit animée avec retard lorsque la page est chargée), vous pouvez utiliser jQuery pour résoudre ce problème et éviter que le fichier CSS ne monte en taille. Le délai d'animation augmente dynamiquement.

$.each($('.myClass'), function(i, el){
    $(el).css({'opacity':0});
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));

});​

EDIT: Voici le même code que j'ai ajusté pour utiliser avec animate.css (installez un plugin supplémentaire avant utilisation https: //Gist.github .com/1438179 )

$.each($(".myClass"), function(i, el){
    $(el).css("opacity","0");
    setTimeout(function(){
       $(el).animateCSS("fadeIn","400");
    },500 + ( i * 500 ));

});

Où "fadeIn" est de type animation, "400" - temps d'exécution de l'animation, 500 - délai pour chaque élément de la page à animer.

8
Neolo

Comme ça:

.myClass img {
    -webkit-animation: myAnimation 0.9s linear forwards;
}

.myClass img:nth-child(1){
    -webkit-animation-delay: 0.1s;
}

.myClass img:nth-child(2){
    -webkit-animation-delay: 0.2s;
}

[...etc...]
0
peduarte