Slow down ping animation for muted icon

dylanlangston · Dec 10, 2023 · 44092b8 · 44092b8
1 parent 0465278
commit 44092b8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/asteroids-website/src/routes/+page.svelte b/src/asteroids-website/src/routes/+page.svelte
@@ -265,7 +265,7 @@
 			{#if muted}
 				<div
 					in:fly
-					class="absolute select-none animate-ping mt-2 opacity-80 mh-auto text-center right-0 left-0 text-2xl lg:text-5xl lg:m-5"
+					class="absolute opacity-75 select-none animate-pingSlow mt-2 opacity-80 mh-auto text-center right-0 left-0 text-2xl lg:text-5xl lg:m-5"
 				>
 					🔇
 				</div>

diff --git a/src/asteroids-website/tailwind.config.js b/src/asteroids-website/tailwind.config.js
@@ -17,7 +17,11 @@ export default {
       'red-mid': '#c24b6e',
       'red-dark': '#a73169',
     },
-    extend: {},
+    extend: {
+      animation: {
+        'pingSlow': 'ping 1.5s ease-in-out infinite',
+      }
+    },
   },
   plugins: [],
 }