Plusieurs animations avec CSS3 ne fonctionnant pas comme prévu

Question

J'ai un ensemble de divs que j'anime de différentes manières. Les premier balançoires/flips sur la pile à l'aide:

@-webkit-keyframes cardflip { 
    from { 
     -webkit-transform: perspective(2000) rotateY(90deg); 
     -webkit-transform-origin: 100% 0%; 
    } 
    to { 
     -webkit-transform: perspective(2000) rotateY(0deg); 
     -webkit-transform-origin: 100% 0%; 
     -webkit-transform: translate3d(0, 0, 0); 
    } 
} 

Alors que les autres utilisent des transformations:

#cards .card:nth-child(2) { -webkit-transform: translate3d(0, 171px, 0); transform: translate3d(0, 183px, 0); } 
#cards .card:nth-child(3) { -webkit-transform: translate3d(0, 342px, 0); transform: translate3d(0, 352px, 0); } 
#cards .card:nth-child(4) { -webkit-transform: translate3d(0, 513px, 0); transform: translate3d(0, 521px, 0); } 
#cards .card:nth-child(5) { -webkit-transform: translate3d(0, 684px, 0); transform: translate3d(0, 690px, 0); } 
#cards .card:nth-child(6) { -webkit-transform: translate3d(0, 855px, 0); transform: translate3d(0, 859px, 0); } 
#cards .card:nth-child(7) { -webkit-transform: translate3d(0, 1026px, 0); transform: translate3d(0, 1028px, 0); } 

Ce que je pense arriver est quand j'ajoute une nouvelle div dans la première position l'autre Les 'cartes' glissent vers le bas, et la première retourne dans la position supérieure. Mais il semble que de la façon dont je l'ai configuré, l'animation glissante ne se produit pas lorsque j'ajoute la nouvelle div sur le dessus de la pile, elle vient juste de prendre sa nouvelle position. Comment puis-je réparer cela? En passant, je ne travaille que dans Chrome, d'où l'absence de préfixes non-webkit.

Fiddle.

Answer 1

Tu dois le faire avec un peu de javascript, une classe au lieu de basculer. En effet, le sélecteur CSS du premier enfant est immédiatement utilisé et parce que le transfert d'une animation à une transition ne fonctionne pas la façon dont vous pourriez penser qu'il pourrait

var count = 0; 
setInterval(function() { 
    $('#cards').prepend('<div class="card">testadd' + count++ + '</div>'); 
    setTimeout(function() { 
     document.getElementsByClassName("card")[0].className = "card first"; 
    }, 10); // Fire just after it's added so it transitions 
    $('#cards .card:last').remove(); 
}, 5000); 

CSS

#cards .first { -webkit-transform:translate3d(0,0,0) rotateY(0deg); } 
#cards .card:nth-child(1) { z-index: 1000; } 

Demo

(Le compte était à des fins de test)