From 9797261c1711d6d7d211158da3e90bf569a67d92 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 10 Dec 2023 21:14:55 -0800
Subject: [PATCH] Use individual transform properties

Allows granular transition control. Introduced in CSS Transforms Module Level 2 and supported in all modern web browsers in 2022.
---
 index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 2925718..d8a16b5 100644
--- a/index.html
+++ b/index.html
@@ -69,7 +69,7 @@
 
     @keyframes spin {
       100% {
-        transform: rotate(360deg);
+        rotate: 360deg;
       }
     }
 
@@ -298,12 +298,12 @@
       content: "→";
       display: inline-block;
       margin-inline-start: 4px;
-      transition: transform 400ms;
+      transition: translate 400ms;
     }
 
     :is(.arrow-movement:hover, .arrow-movement:focus)::after {
-      transform: translateX(4px);
-      transition: transform 200ms;
+      translate: 4px;
+      transition: translate 200ms;
     }
 
     .gradient-shadow {
@@ -316,7 +316,7 @@
       z-index: -1;
       top: 0;
       left: 0;
-      transform: translate(-2px, -2px);
+      translate: -2px -2px;
       width: calc(100% + 4px);
       height: calc(100% + 4px);
       border-radius: 18px;
-- 
2.47.3