diff --git a/src/components/docs/code/styles.css.ts b/src/components/docs/code/styles.css.ts
index 70cd154f..5eb6b1f3 100644
--- a/src/components/docs/code/styles.css.ts
+++ b/src/components/docs/code/styles.css.ts
@@ -22,7 +22,7 @@ export const container = styled.css`
     right: 0;
     top: 0;
     z-index: 1;
-    transition: opacity 0.3s;
+    transition: opacity 0.3s, color 0.3s, background-color 0.3s;
   }
 
   &:hover::before {
diff --git a/src/components/docs/heading/styles.css.ts b/src/components/docs/heading/styles.css.ts
index 19814cd6..50d0e4e3 100644
--- a/src/components/docs/heading/styles.css.ts
+++ b/src/components/docs/heading/styles.css.ts
@@ -20,13 +20,13 @@ export const container = styled.css`
     background: linear-gradient(${theme.color.text.primary} 30%, ${theme.color.text.primary} 70%);
     box-shadow: ${theme.color.text.primary} 0 ${theme.borderWidth.calc(1)} ${theme.borderWidth.calc(3)};
     border-radius: ${theme.borderWidth.calc(4)};
-    transition: all 0.25s ease 0s;
+    transition: all 0.25s ease 0s, color 0.3s, background-color 0.3s;
     z-index: 1;
   }
 
   > a {
     opacity: 0;
-    transition: opacity 0.3s !important;
+    transition: opacity 0.3s, color 0.3s, background-color 0.3s !important;
     text-decoration: none !important;
     border: none !important;
     position: absolute !important;
@@ -39,7 +39,7 @@ export const container = styled.css`
       color: ${theme.color.text.description};
       font-size: ${theme.fontSize.calc(0.5)};
       padding-left: ${theme.spacing.calc(1)};
-      transition: opacity 0.3s;
+      transition: opacity 0.3s, color 0.3s, background-color 0.3s;
     }
   }
 
diff --git a/src/components/layouts/article-info/styles.css.ts b/src/components/layouts/article-info/styles.css.ts
index b5304b9e..4df2a0da 100644
--- a/src/components/layouts/article-info/styles.css.ts
+++ b/src/components/layouts/article-info/styles.css.ts
@@ -13,10 +13,7 @@ export const article = styled.css`
   margin: ${theme.spacing.calc(2)} ${theme.spacing.calc(-5)};
   border-radius: ${theme.borderRadius.calc(0.8)};
   color: ${theme.color.text.primary};
-  transition:
-    color 0.3s,
-    background-color 0.3s,
-    box-shadow 0.3s;
+  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
 
   &:hover {
     background-color: ${theme.color.background.hover};
diff --git a/src/components/layouts/hero/styles.css.ts b/src/components/layouts/hero/styles.css.ts
index a6304228..e9470e27 100644
--- a/src/components/layouts/hero/styles.css.ts
+++ b/src/components/layouts/hero/styles.css.ts
@@ -12,7 +12,7 @@ export const avatar = styled.css`
   height: ${theme.size.calc(25)} !important;
   border-radius: ${theme.borderRadius.half} !important;
   filter: ${theme.color.image.filter} !important;
-  transition: filter 0.3s !important;
+  transition: filter 0.3s, color 0.3s, background-color 0.3s !important;
 `;
 
 export const author = styled.css`
diff --git a/src/components/root/spotlight/styles.css.ts b/src/components/root/spotlight/styles.css.ts
index 1ca3beb6..4f61dba7 100644
--- a/src/components/root/spotlight/styles.css.ts
+++ b/src/components/root/spotlight/styles.css.ts
@@ -3,9 +3,7 @@ import { theme } from "../../../theme/theme.css";
 import { iconify } from "../../ui/iconify/query";
 
 export const root = styled.css`
-  transition-property: visibility;
-  transition-duration: 0.3s;
-  transition-timing-function: ease;
+  transition: visibility 0.3s ease, color 0.3s, background-color 0.3s;
 `;
 
 export const background = styled.css`
@@ -18,9 +16,7 @@ export const background = styled.css`
   left: 0;
   right: 0;
   z-index: 9;
-  transition-property: opacity;
-  transition-duration: 0.3s;
-  transition-timing-function: ease;
+  transition: opacity 0.3s ease, color 0.3s, background-color 0.3s;
 
   &::after {
     content: "";
@@ -49,9 +45,7 @@ export const container = styled.css`
   padding-bottom: ${theme.spacing.calc(10)};
   pointer-events: none;
 
-  transition-property: opacity;
-  transition-duration: 0.3s;
-  transition-timing-function: ease;
+  transition: opacity 0.3s ease, color 0.3s, background-color 0.3s;
   transform-origin: center center;
 `;
 
diff --git a/src/components/templates/articles/styles.css.ts b/src/components/templates/articles/styles.css.ts
index 803fec13..cedc16fb 100644
--- a/src/components/templates/articles/styles.css.ts
+++ b/src/components/templates/articles/styles.css.ts
@@ -22,7 +22,7 @@ export const heading = styled.css`
     background: linear-gradient(${theme.color.text.primary} 30%, ${theme.color.text.primary} 70%);
     box-shadow: ${theme.color.text.primary} 0 ${theme.borderWidth.calc(1)} ${theme.borderWidth.calc(3)};
     border-radius: ${theme.borderWidth.calc(4)};
-    transition: all 0.25s ease 0s;
+    transition: all 0.25s ease 0s, color 0.3s, background-color 0.3s;
     z-index: 1;
   }
 `;
diff --git a/src/components/ui/button/styles.css.ts b/src/components/ui/button/styles.css.ts
index 19ae7b02..948f74fb 100644
--- a/src/components/ui/button/styles.css.ts
+++ b/src/components/ui/button/styles.css.ts
@@ -20,10 +20,7 @@ export const button = styled.css`
   color: ${theme.color.text.primary};
   gap: ${theme.spacing.calc(1)};
   cursor: pointer;
-  transition:
-    color 0.3s,
-    background-color 0.3s,
-    box-shadow 0.3s;
+  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
 
   &:hover,
   &.active {
diff --git a/src/components/ui/link/styles.css.ts b/src/components/ui/link/styles.css.ts
index 5f9152d4..573920bb 100644
--- a/src/components/ui/link/styles.css.ts
+++ b/src/components/ui/link/styles.css.ts
@@ -6,7 +6,7 @@ export const link = styled.css`
   position: relative;
   color: ${theme.color.text.primary};
   border-bottom: ${theme.borderWidth.calc(1)} ${theme.borderStyle.default} ${theme.color.background.focus};
-  transition: border 0.3s;
+  transition: border 0.3s, color 0.3s, background-color 0.3s;
 
   &.active,
   &:hover,
diff --git a/src/components/widgets/toc/styles.css.ts b/src/components/widgets/toc/styles.css.ts
index 6b4f7584..667391f9 100644
--- a/src/components/widgets/toc/styles.css.ts
+++ b/src/components/widgets/toc/styles.css.ts
@@ -23,7 +23,7 @@ export const container = styled.css`
     opacity: 0.5;
     overflow-y: auto;
     overflow-x: hidden;
-    transition: opacity 0.6s;
+    transition: opacity 0.6s, color 0.3s, background-color 0.3s;
   }
 
   &:hover {
@@ -61,7 +61,7 @@ export const item = styled.css`
     margin: 0 ${theme.spacing.calc(2.5)};
     color: ${theme.color.text.description};
     border: none;
-    transition: color 0.3s;
+    transition: color 0.3s, color 0.3s, background-color 0.3s;
 
     &.active,
     &:hover,
diff --git a/src/theme/global.css.ts b/src/theme/global.css.ts
index a5a66cf3..0a592d89 100644
--- a/src/theme/global.css.ts
+++ b/src/theme/global.css.ts
@@ -21,9 +21,7 @@ styled.global`
     letter-spacing: ${theme.letterSpacing.wide};
     scroll-behavior: smooth;
     word-break: break-word;
-    transition:
-      color 0.3s,
-      background-color 0.3s;
+    transition: color 0.3s, background-color 0.3s;
     -moz-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;