Use transition instead of animation

Author: jennydaman

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;
   }
 }

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%);
     }
   }