シンプルなカードスワップアニメーション
HTMLとCSSだけを使用したシンプルなカードスワップアニメーション。2つのアイテムを比較する際に使用できます。
2 分 読む
css
html
初心者
学習中
タグ
css
html
初心者
学習中
最終出力 🎉
カードのためのHTML 💻
これは怖い 😆 と思うかもしれませんが… 本当にそれだけです 😅。 ただの2つのカード用の2つのdivです。
これらのdivを囲むものはあなた次第です。 セクション
またはdiv
など、お好きなものを使用できます。
<div class="front-card"> </div> <div class="back-card"> </div>
アニメーションのためのCSS 💻
最終出力のカードには少し色と影があり、それには簡単なtailwindcssを使用しました。ただし、これはアニメーション自体とは関係ありませんので、ここには含めていません。
このアニメーションの動作方法は次のとおりです。
- 我々は
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); } }
これでおしまい!最後まで読んでいただきありがとうございます 🤗