From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 19 Feb 2024 04:25:46 +0000 (-0800)
Subject: Use translate property instead of transform
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=d7831095a2cb8d47653cfd9aae451c4e647ff962;p=utf-8-visualizer

Use translate property instead of transform

Allows more precise control over transition
---

diff --git a/style.css b/style.css
index 015e11d..0432845 100644
--- a/style.css
+++ b/style.css
@@ -78,12 +78,12 @@ a.icon-link:focus-within {
 a.icon-link>svg {
   inline-size: 24px;
   block-size: 24px;
-  transition: transform 600ms;
+  transition: translate 600ms;
 }
 
 :is(a.icon-link:hover, a.icon-link:focus-within)>svg {
-  transform: translateY(-2px);
-  transition: transform 200ms;
+  translate: 0 -2px;
+  transition: translate 200ms;
 }
 
 a:not(.icon-link) {
@@ -149,11 +149,11 @@ a:not(.icon-link) {
 /* These keyframes are used in the al-point-visualization template styling, but must be declared globally */
 @keyframes slideIn {
   from {
-    transform: translateY(-100%);
+    translate: 0 -100%;
   }
 
   to {
-    transform: translateY(0);
+    translate: 0;
   }
 }