From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 11 Dec 2023 05:14:55 +0000 (-0800)
Subject: Use individual transform properties
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=9797261c1711d6d7d211158da3e90bf569a67d92;p=css-loaders

Use individual transform properties

Allows granular transition control. Introduced in CSS Transforms Module Level 2 and supported in all modern web browsers in 2022.
---

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;