シンプルなカードスワップアニメーション

最終出力 🎉

カードのためのHTML 💻

これは怖い 😆 と思うかもしれませんが… 本当にそれだけです 😅。 ただの2つのカード用の2つのdivです。
これらのdivを囲むものはあなた次第です。 セクションまたはdivなど、お好きなものを使用できます。

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

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

アニメーションのためのCSS 💻

このアニメーションの動作方法は次のとおりです。

• 我々はtopおよびleftプロパティを使用して、各カードのそれぞれの開始位置に配置します。
• 各カードのアニメーションを定義するために@keyframesを使用します。つまり、カードがどのように移動し、いつ移動するかを定義します。
• 任意の時点で上にあるカードを制御するためにz-indexを使用します。

それだけです！シンプルでしょう？ 😊

root変数はこのアニメーションの楽しい部分です 🥳
これらの変数を使用してアニメーションに関するすべてをカスタマイズできます（アニメーションの50％の時間フレームを除く）。変更はアニメーションに反映されます。

これはコードがたくさん見えるかもしれませんが、実際には数回繰り返されるだけです 😛。 怖がらずに一度通してみてください。

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

これでおしまい！最後まで読んでいただきありがとうございます 🤗