From 94e795f1b30a5fc16661f99dcbacb1bc8a620f4e Mon Sep 17 00:00:00 2001
From: Jennings Zhang <jenni_zh@protonmail.com>
Date: Fri, 26 Jun 2020 03:10:38 -0400
Subject: [PATCH] Use transition instead of animation

---
 src/components/hacks-button.vue | 11 +----------
 src/components/hacks-square.vue | 11 +----------
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/components/hacks-button.vue b/src/components/hacks-button.vue
index 73b3a0e..c0e1970 100644
--- a/src/components/hacks-button.vue
+++ b/src/components/hacks-button.vue
@@ -35,6 +35,7 @@ export default {
   margin: 0.5em;
   height: fit-content;
   padding: 15px;
+  transition: background-color 1s;
 
   &__row {
     display: flex;
@@ -54,16 +55,6 @@ export default {
 
   &:hover,
   &:focus {
-    @keyframes colorin {
-      from {
-        background-color: $hacks-nav-inactive-color;
-      }
-      to {
-        background-color: $hacks-nav-active-color;
-      }
-    }
-
-    @include animation-fast(colorin);
     background-color: $hacks-nav-active-color;
   }
 }
diff --git a/src/components/hacks-square.vue b/src/components/hacks-square.vue
index 19f2327..9235787 100644
--- a/src/components/hacks-square.vue
+++ b/src/components/hacks-square.vue
@@ -28,19 +28,10 @@ export default {
     object-fit: cover;
     border-radius: 10%;
     filter: grayscale(100%);
+    transition: filter 1s;
 
     &:hover,
     &:focus {
-      @keyframes movein {
-        from {
-          filter: grayscale(100%);
-        }
-        to {
-          filter: grayscale(0%);
-        }
-      }
-
-      @include animation-fast(movein);
       filter: grayscale(0%);
     }
   }