Animation Fehler

public/.htaccess

@@ -1,3 +1,3 @@
 ErrorDocument 403 /403.html
 ErrorDocument 404 /404.html
-ErrorDocument 500 /500.html
+ErrorDocument 500 /500.html

src/components/ErrorComponent.astro

@@ -18,9 +18,19 @@ const { title = "404" } = Astro.props;
         <h1
             class="bg-red-500 text-white text-4xl font-bold py-2 px-4 font-mono flex items-center justify-center gap-3"
         >
-            <Icon name="tabler:alert-triangle" class="size-9" />
+            <span class="relative grid h-9 w-9">
+                <Icon
+                    name="tabler:triangle-filled"
+                    class="col-start-1 row-start-1 size-9 animate-ping opacity-75 translate-x-[-0.25px] translate-y-[-1.5px] blur-[1px]"
+                />
+                <Icon
+                    name="tabler:alert-triangle"
+                    class="col-start-1 row-start-1 size-9 relative"
+                />
+            </span>
             Fehler {title}
         </h1>
+
         <p class="mb-4 text-red-500 py-2 px-4 text-lg">
             <slot />
             <a
@@ -38,4 +48,8 @@ const { title = "404" } = Astro.props;
     .error-component :global(br) {
         @apply mb-3;
     }
+
+    .error-component .animate-ping {
+        animation-duration: 2s;
+    }
 </style>