Una Sencilla Animación de Intercambio de Tarjetas

Resultado Final 🎉

Animación de Intercambio de Tarjetas usando HTML y CSS

HTML para las Tarjetas 💻

Sé que esto 👇🏻 parece aterrador 😆, pero… en serio, eso es todo 😅. Solo dos divs para las dos tarjetas.
Lo que envuelvas alrededor de estos divs depende de ti. Puedes usar un section o un div, lo que prefieras.

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

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

CSS para la Animación 💻

Las tarjetas en el resultado final de arriba tienen un poco de color y sombra, y para eso he utilizado un poco de tailwindcss simple. Pero eso no está relacionado con la animación en sí, así que no lo incluiré aquí.

Así es como funciona esta animación:

Posicionamos las dos tarjetas en sus respectivas posiciones iniciales usando las propiedades top y left.
Usamos @keyframes para definir la animación para cada tarjeta, es decir, cómo debe moverse la tarjeta y cuándo.
Usamos z-index para controlar cuál tarjeta está encima en cualquier momento.

¡Y eso es todo! ¿Simple, verdad? 😊

Las variables root son la parte divertida de esta animación 🥳
Puedes personalizar todo acerca de la animación usando estas variables (excepto el 50% del tiempo de la animación 😭) y los cambios se reflejarán en la animación.

Sé que esto 👇🏻 parece mucho código, pero realmente es lo mismo repetido unas cuantas veces 😛. Así que no te asustes y simplemente revísalo una vez.

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

¡Eso es todo!, gracias 🤗 por leer hasta aquí