From d7831095a2cb8d47653cfd9aae451c4e647ff962 Mon Sep 17 00:00:00 2001 From: Ardis Lu Date: Sun, 18 Feb 2024 20:25:46 -0800 Subject: [PATCH] Use translate property instead of transform Allows more precise control over transition --- style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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; } } -- 2.47.3