A Simple Card Swap Animation

Final Output 🎉

Simple Card Swap Animation using HTML and CSS

HTML for the Cards 💻

I know this looks scary 😆, but … seriously that’s about it 😅. Just two divs for the two cards.
What you wrap around these divs is up to you. You can use a section or a div whatever you like.

     <div class="front-card">
  </div>

  <div class="back-card">
  </div>

CSS for the Animation 💻

The cards in the final output above have a bit of color and shadow and for that I've used some simple tailwindcss. But that's unrelated to the animation itself, so I'm not including that here.

Here’s how this animation works:

We position the two cards at their respective starting positions using the top and left properties.
We use @keyframes to define the animation for each card. i.e., how the card should move and when.
We use z-index to control which card is on top at any given time.

And that’s it! Simple right? 😊

The root variables are the fun part about this animation 🥳
You can customize everything about the animation using these variables, (except for the 50% timeframe of the animation 😭) and the changes will be reflected in the animation.

I know this looks like a lot of code, but it’s really just the same thing repeated a few times 😛. So don’t be scared and just go through it once.

CSS

   :root {
	--front-card-z-index: 1;
	--back-card-z-index: 0;
	--animation-duration: 6s;
	--card-width: 500px;
	--front-card-start-top: 0%;
	--front-card-start-left: 0%;
	--back-card-start-top: -10%;
	--back-card-start-left: 10%;
}

.front-card {
	position: absolute;
	z-index: var(--front-card-z-index);
	top: var(--front-card-start-top);
	left: var(--front-card-start-left);
	animation: swap-front-card var(--animation-duration) ease-in-out infinite alternate;
}
  
.back-card {
	position: absolute;
	z-index: var(--back-card-z-index);
	top: var(--back-card-start-top);
	left: var(--back-card-start-left);
	animation: swap-back-card var(--animation-duration) ease-in-out infinite alternate;
}
  
@keyframes swap-front-card {
	0% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}

	25% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}

	40% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}

	49% {
		z-index: var(--front-card-z-index);
	}

	50% {
		z-index: var(--back-card-z-index);
		top: calc(var(--front-card-start-top) - 10%);
		left: calc(var(--front-card-start-left) + 67%);
	}

	75% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}

	100% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}
}
  
@keyframes swap-back-card {
	0% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}

	25% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}

	40% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}

	49% {
		z-index: var(--back-card-z-index);
	}

	50% {
		z-index: var(--front-card-z-index);
		top: calc(var(--back-card-start-top) + 10%);
		left: calc(var(--back-card-start-left) - 20%);
	}

	70% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}

	100% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}
}

That’s it!, thanks 🤗 for reading all the way till down here