Question 301627 in Html Question posted in
Some basic documentation can be found here.

How to Animate cards using HTML , CSS & Javascript

I’m diving into the world of CSS animation and attempting to replicate the card shuffling animation seen: https://go.topcreditcardfinder.com/

Here’s a glimpse of what I’ve achieved so far:
https://youtu.be/GDIJ2K22cnY

I’ve managed to achieve the basic movement, but I’m struggling with improving the translation and relative movement for each card. My goal is to refine the animation for a smoother and more realistic card shuffling effect.
My cards are moving but the animation is sudden and is not creating a cyclic shuffle animation like what i am expecting. What I maybe doing wrong here?

Here’s the code that I have 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; 
}
Tags:

2

Answers


  1. 0

    I think this page will help you : https://www.w3schools.com/css/css3_transitions.asp

    You can do a transition with each card moving, fading to opacity: 0 & doing illusion it passed under the other card.

    Login or Signup to reply.
  2. 0

    I’ve recreated the animation at the link with just CSS here:

    .card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  transform-style: preserve-3d;
}

.card {
  position: absolute;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  animation: rotateCard 10.5s ease-in-out infinite;
}

@keyframes rotateCard {
  /* Hold front */
  0% {
    transform: translateZ(1px);
  }
  /* Hold front */
  28.57% {
    transform: translateZ(1px);
  }
  /* Move left */
  33.33% {
    transform: rotate(-4deg) scale(0.9) translate(-15%, -5%);
  }
  /* Hold left */
  61.90% {
    transform: rotate(-4deg) scale(0.9) translate(-15%, -5%);
  }
  /* Move right */
  66.67% {
    transform: rotate(4deg) scale(0.9) translate(15%, -5%);
  }
  /* Hold right */
  95.23% {
    transform: rotate(4deg) scale(0.9) translate(15%, -5%);
  }
  /* Move front */
  100% {
    transform: translateZ(1px);
  }
}

.card:nth-child(1) {
  animation-delay: -7s;
}
.card:nth-child(2) {
  animation-delay: -3.5s;
}
/* This one is naturally at the front so we'll start with it */
.card:nth-child(3) {
  animation-delay: 0;
}
    <div class="card-container">
  <div class="card" style="background-color: red"></div>
  <div class="card" style="background-color: blue"></div>
  <div class="card" style="background-color: green"></div>
</div>

    The percentages and time values are based on these calculations:

    at front: 0s - start point 1
hold front: 3s (3 / 10.5 = 28.57%)
move left: 0.5s (3.5 / 10.5 = 33.33%)  - start point 2
hold left: 3s (6.5 / 10.5 = 61.90%)
move right: 0.5s (7 / 10.5 = 66.67%) - start point 3
hold right: 3s (10 / 10.5 = 95.23%)
move front: 0.5s (10.5 / 10.5 = 100%)

    If you want to adjust any timings you’ll need to recalculate using the same method.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search