KnockOutWhist/KnockOutWhist-Web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

feat(ui): CSS Animations #18 (#27)

Browse Source 
Added css animations on reload

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #27
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>
This commit is contained in:
lq64
2025-10-30 08:03:00 +01:00
committed by Janis
parent 1f377de0f4
commit c0dadf8927
2 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
knockoutwhistweb/app/assets/stylesheets/main.less
View File

@@ -3,7 +3,10 @@
@background-image: var(--background-image); @background-image: var(--background-image);
@color: var(--color); @color: var(--color);
@keyframes slideIn {
0% { transform: translateX(-100vw); }
100% { transform: translateX(0); }
}
body { body {
background-image: @background-image; background-image: @background-image;
background-size: 100vw 100vh; background-size: 100vw 100vh;
@@ -19,8 +22,16 @@ html, body {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
text-align: center; text-align: center;
h1 {
animation: slideIn 0.5s ease-out forwards;
animation-fill-mode: backwards;
}
}
#textanimation {
animation: slideIn 0.5s ease-out forwards;
animation-fill-mode: backwards;
animation-delay: 1s;
} }
#sessions a, h1, p { #sessions a, h1, p {
color: @color; color: @color;
font-size: 40px; font-size: 40px;
@@ -37,8 +48,21 @@ html, body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
height: 20% height: 20%;
img {
animation: slideIn 0.5s ease-out forwards;
animation-fill-mode: backwards;
&:nth-child(1) { animation-delay: 0.5s; }
&:nth-child(2) { animation-delay: 1s; }
&:nth-child(3) { animation-delay: 1.5s; }
&:nth-child(4) { animation-delay: 2s; }
&:nth-child(5) { animation-delay: 2.5s; }
&:nth-child(6) { animation-delay: 3s; }
&:nth-child(7) { animation-delay: 3.5s; }
} }
}
#cardsplayed { #cardsplayed {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

4
knockoutwhistweb/app/views/sessions.scala.html
View File

@@ -3,9 +3,9 @@
@main("Sessions") { @main("Sessions") {
<div id="sessions"> <div id="sessions">
<h1>Knockout Whist sessions</h1> <h1>Knockout Whist sessions</h1>
<p>Please select your session to jump inside the game!</p> <p id="textanimation">Please select your session to jump inside the game!</p>
@for(session <- sessions) { @for(session <- sessions) {
<a href="@routes.HomeController.ingame(session.id.toString)">@session.name</a><br> <a id="textanimation" href="@routes.HomeController.ingame(session.id.toString)">@session.name</a><br>
} }
</div> </div>
} }