From 0a9bca9ae818b441072d2de81d94e9361bcae0e9 Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Thu, 30 Jul 2020 13:21:16 -0400 Subject: [PATCH] Properly fix the marching ants --- src/components/Statblock.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Statblock.vue b/src/components/Statblock.vue index 5ce867e..3028559 100644 --- a/src/components/Statblock.vue +++ b/src/components/Statblock.vue @@ -299,10 +299,11 @@ a { /* yoinked from https://codepen.io/danichk/pen/PPRxrR?editors=0110 */ .marching-ants { - background: linear-gradient(#111, #111) padding-box, repeating-linear-gradient(-45deg, var(--ants-color) 0, var(--ants-color) 25%, transparent 0, transparent 50%) 0 / 3em 3em; - animation: marching-ants 4s infinite linear; + background: linear-gradient(#111, #111) padding-box, repeating-linear-gradient(-45deg, var(--ants-color) 0, var(--ants-color) 25%, transparent 0, transparent 50%) 0 / 20px 20px; + animation: marching-ants 1s infinite linear; border: 4px solid transparent; } + .statblock[data-active] .statblock-shader-selected { --ants-color: #f88; border-radius: 8px; @@ -328,8 +329,11 @@ a { } @keyframes marching-ants { + from { + background-position: 0px 0px; + } to { - background-position: 100% 100%; + background-position: 20px 20px; } }