TheMagician
/
tarotcard.css
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add "deal" animation

This commit is contained in:
The Magician 2023-12-01 16:43:12 +00:00
parent aa070c9240
commit 1a0dce9d85
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
tarotcard-deal.css
View File

@ -1,3 +1,13 @@
body { @keyframes deal-card {
color: green; from {
transform: translateY(300vh);
}
to {
transform: translateY(0);
}
}
.tarot-card--deal {
animation: deal-card 1s both;
} }

4
test/index.html
View File

@ -6,6 +6,8 @@
body { body {
height: 100vh; height: 100vh;
background: #000056; background: #000056;
margin: 0 auto;
} }
.center-grid { .center-grid {
@ -35,7 +37,7 @@
</div> </div>
<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. --> <!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
<div id="deal-card" class="tarot-card"> <div id="deal-card" class="tarot-card tarot-card--deal">
<div class="tarot-card__section tarot-card__section--art"> <div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Deal Card artwork image." title="The Simple Card artwork image."> <img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Deal Card artwork image." title="The Simple Card artwork image.">
</div> </div>