diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss
index 3fdd08af..52863998 100644
--- a/components/CharacterUnit/index.scss
+++ b/components/CharacterUnit/index.scss
@@ -69,7 +69,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    transition: all 0.18s ease-in-out;
+    transition: $duration-zoom all ease-in-out;
     height: auto;
     width: 100%;
     -webkit-user-select: none; /* Safari */
@@ -86,6 +86,7 @@
       z-index: 1;
 
       svg {
+        transition: $duration-color-fade fill ease-in-out;
         fill: var(--icon-secondary);
       }
     }
diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss
index 398d3ae3..efc7f263 100644
--- a/components/SummonUnit/index.scss
+++ b/components/SummonUnit/index.scss
@@ -42,7 +42,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    transition: all 0.18s ease-in-out;
+    transition: $duration-zoom all ease-in-out;
 
     &:hover .icon svg {
       fill: var(--icon-secondary-hover);
@@ -55,6 +55,7 @@
       z-index: 1;
 
       svg {
+        transition: $duration-color-fade fill ease-in-out;
         fill: var(--icon-secondary);
       }
     }
diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index e3cc2be3..12ec3378 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -122,7 +122,7 @@
     margin-bottom: calc($unit / 4);
     overflow: hidden;
     position: relative;
-    transition: all 0.18s ease-in-out;
+    transition: $duration-zoom all ease-in-out;
 
     &:hover .icon svg {
       fill: var(--icon-secondary-hover);
@@ -169,6 +169,7 @@
       z-index: 1;
 
       svg {
+        transition: $duration-color-fade fill ease-in-out;
         fill: var(--icon-secondary);
       }
     }
diff --git a/styles/variables.scss b/styles/variables.scss
index f785cf61..f18f0c96 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -307,3 +307,7 @@ $item-corner: $unit-half;
 // Shadows
 $hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
 $hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;
+
+// Durations
+$duration-color-fade: 0.24s;
+$duration-zoom: 0.18s;