From 8dff37fd9ea689282d7b50d2988e31821a3ca1c9 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 14:55:12 +1000
Subject: [PATCH] Crab go squoosh

---
 .../src/components/Logo/logoStyle.ts          |  4 ----
 crabfit-frontend/src/pages/Home/homeStyle.ts  | 22 +++++++++++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/crabfit-frontend/src/components/Logo/logoStyle.ts b/crabfit-frontend/src/components/Logo/logoStyle.ts
index 2709403..1243b21 100644
--- a/crabfit-frontend/src/components/Logo/logoStyle.ts
+++ b/crabfit-frontend/src/components/Logo/logoStyle.ts
@@ -11,19 +11,15 @@ export const A = styled.a`
 
   @keyframes jelly {
     from,to {
-      -webkit-transform: scale(1,1);
       transform: scale(1,1)
     }
     25% {
-      -webkit-transform: scale(.9,1.1);
       transform: scale(.9,1.1)
     }
     50% {
-      -webkit-transform: scale(1.1,.9);
       transform: scale(1.1,.9)
     }
     75% {
-      -webkit-transform: scale(.95,1.05);
       transform: scale(.95,1.05)
     }
   }
diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts
index 976f8d8..a214baa 100644
--- a/crabfit-frontend/src/pages/Home/homeStyle.ts
+++ b/crabfit-frontend/src/pages/Home/homeStyle.ts
@@ -47,6 +47,28 @@ export const TitleLarge = styled.h1`
 
 export const Logo = styled.img`
 	width: 80px;
+  transition: transform .2s;
+  animation: jelly .5s 1 .1s;
+
+  @keyframes jelly {
+    from,to {
+      transform: scale(1,1)
+    }
+    25% {
+      transform: scale(.9,1.1)
+    }
+    50% {
+      transform: scale(1.1,.9)
+    }
+    75% {
+      transform: scale(.95,1.05)
+    }
+  }
+
+  &:active {
+    animation: none;
+    transform: scale(.85);
+  }
 `;
 
 export const Links = styled.nav`