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

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>

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -3,7 +3,10 @@
 
 @background-image: var(--background-image);
 @color: var(--color);
-
+@keyframes slideIn {
+  0% { transform: translateX(-100vw); }
+  100% { transform: translateX(0); }
+}
 body {
     background-image: @background-image;
     background-size: 100vw 100vh;
@@ -19,8 +22,16 @@ html, body {
     justify-content: flex-start;
     align-items: 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 {
     color: @color;
     font-size: 40px;
@@ -37,8 +48,21 @@ html, body {
     display: flex;
     flex-direction: row;
     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 {
     display: flex;
     flex-direction: row;

knockoutwhistweb/app/views/sessions.scala.html

@@ -3,9 +3,9 @@
 @main("Sessions") {
     <div id="sessions">
         <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) {
-            <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>
 }