In my project, I have a series of div elements that I am animating in various ways. The first one utilizes a cardflip animation effect:
@-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);
}
}
Meanwhile, the subsequent divs are manipulated using transform properties:
#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); }
I anticipated that when I insert a new div at the top position, the other 'cards' would smoothly slide down while the first one flips into place at the top. However, the sliding animation does not occur as intended; instead, the new div immediately snaps to its designated spot. How can I rectify this issue?
As an aside, my current development is exclusively for Chrome, hence the absence of non-webkit prefixes.