As I delve into the realm of CSS animation, my primary focus is on replicating the captivating card shuffling animation showcased at
Here's a glimpse of the progress I've made so far: https://youtu.be/GDIJ2K22cnY
While I've successfully implemented the basic movement, I'm facing challenges when it comes to refining the translation and relative movement of each card. My ultimate goal is to enhance the animation to achieve a smoother and more realistic card shuffling effect. Although the cards are in motion, the animation lacks the cyclic shuffle effect that I aspire to create. I suspect there might be an error in my approach. Can you pinpoint what I might be doing wrong here?
Below is the code snippet I've written:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card-container">
<div class="card">
<img src="./assets/Cart Geometric 2.png" alt="Card 1">
</div>
<div class="card">
<img src="./assets/Cart Geometric 5.png" alt="Card 2">
</div>
<div class="card">
<img src="./assets/Cart Geometric 8.png" alt="Card 3">
</div>
</div>
</body>
</html>
CSS:
body {
font-family: 'HelveticaNeue', sans-serif;
margin: 0;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100vh;
background: url('./assets/Vector\ 1.png') center/cover no-repeat , linear-gradient(180deg, #DBE4ED 100%, #BABABA 100%) ;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.card-container {
position: relative;
perspective: 1000px;
width: 300px;
height: 200px;
}
.card {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: rotateCard 6s linear infinite;
}
@keyframes rotateCard {
20% {
transform: rotate(4deg) translateY(-10px);
z-index: 3;
}
40%, 100% {
transform: rotate(-4deg) translateY(10px);
z-index: 2;
}
0%, 60%, 80% {
transform: scale(1) translateY(0);
z-index: 1;
}
}
.card:nth-child(2) { animation-delay: 2s; }
.card:nth-child(3) { animation-delay: 4s; }
.card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
margin-right: 170px;
}