From ba82ff9f395f4114828d38d9b7915062c714d6d9 Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Sat, 25 Dec 2021 22:48:00 +0100
Subject: [PATCH] feat(login): animated hand wave

---
 src/pages/login/Login.module.scss | 45 +++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/pages/login/Login.module.scss b/src/pages/login/Login.module.scss
index eedf5bf2..06ef06ba 100644
--- a/src/pages/login/Login.module.scss
+++ b/src/pages/login/Login.module.scss
@@ -1,3 +1,43 @@
+// Pure CSS hand wave - by https://jarv.is/notes/css-waving-hand-emoji/
+@keyframes wave-animation {
+    0% {
+        transform: rotate(0deg);
+    }
+    10% {
+        transform: rotate(14deg);
+    } /* The following five values can be played with to make the waving more or less extreme */
+    20% {
+        transform: rotate(-8deg);
+    }
+    30% {
+        transform: rotate(14deg);
+    }
+    40% {
+        transform: rotate(-4deg);
+    }
+    50% {
+        transform: rotate(10deg);
+    }
+    60% {
+        transform: rotate(0deg);
+    } /* Reset for the last half to pause */
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
+/*@keyframes shrink {
+    0% {
+        background-size: 140% 140%;
+    }
+    10% {
+        background-size: 150% 150%;
+    }
+    100% {
+        background-size: 100% 100%;
+    }
+}*/
+
 .login {
     width: 100%;
     height: 100%;
@@ -8,6 +48,7 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
+    /*animation: shrink 5s normal forwards;*/
 
     .nav {
         display: flex;
@@ -113,6 +154,10 @@
                     gap: 4px;
 
                     img {
+                        animation-name: wave-animation;
+                        animation-duration: 2.5s;
+                        animation-iteration-count: 1;
+                        transform-origin: 70% 70%;
                         height: 28px;
                     }
                 }