CODEWITHSUNDEEP
htmlcssanimation
Samsquanch
Samsquanch

Reputation: 9146

Multiple animations with CSS3 not working as expected

I have a set of divs that I'm animating in different ways. The first one swings/flips onto the stack using:

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

While the others are using transforms:

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

What I expect to happen is when I add a new div in the first position the other 'cards' slide down, and the first one flips into the top position. But it seems that the way I have it set up, the sliding animation doesn't happen when I add the new div on top of the stack, it just snaps to its new position. How can I fix this?

By the way, I'm only working in Chrome, hence the lack of non-webkit prefixes.

Fiddle.

Upvotes: 1

Views: 99

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25944

You have to do it with a little bit of javascript, toggling a class instead. This is because the CSS selector of first child is immediately used and because transferring from an animation to a transition doesn't work the way you might think it might

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

(The count was for testing purposes)

Upvotes: 2

Related Questions