From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 4 Dec 2021 08:00:40 +0000 (-0800)
Subject: Tweak animation to be direction-agnostic
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=73a8d045d56e3edcd84d89904f0f3ea9a6d7917d;p=css-loaders

Tweak animation to be direction-agnostic

Background-position does not have logical properties so it will fail on vertical reading modes.
---

diff --git a/index.html b/index.html
index 48d8bc7..c3cff06 100644
--- a/index.html
+++ b/index.html
@@ -24,18 +24,14 @@
 
     .skeleton-line {
       block-size: 1rem;
-      background: linear-gradient(90deg, black, white, black);
-      background-size: 200%;
-      animation: 1s linear infinite alternate shimmer;
+      margin-block: 1rem;
+      animation: shimmer 1s alternate infinite;
+      background: hsl(0deg 0% 50%);
     }
 
     @keyframes shimmer {
-      from {
-        background-position-x: 0%;
-      }
-
-      to {
-        background-position-x: 100%;
+      100% {
+        background: hsl(0deg 0% 85%);
       }
     }