Integrated animations in the Calculate styles.sass

2023-11-19 15:51:28 +01:00 · 2023-11-19 15:51:28 +01:00 · cdd68c0c61
commit cdd68c0c61
parent b4790a19e9
1 changed files with 14 additions and 1 deletions
--- a/client/src/pages/Game/states/Calculate/styles.sass
+++ b/client/src/pages/Game/states/Calculate/styles.sass
@ -16,6 +16,7 @@
    display: flex
    padding: 1rem 2rem
    transition: 1s ease-in-out
+    animation: roundIn 0.7s ease-out

    .round-item
      width: 12rem
@ -47,3 +48,15 @@
    user-select: none
    h2, p
      margin: 0
+
+@keyframes roundIn
+  0%
+    opacity: 0
+    transform: scale(0.3)
+  50%
+    opacity: 1
+    transform: scale(1.05)
+  70%
+    transform: scale(0.9)
+  100%
+    transform: scale(1)