diff --git a/src/themes/applied.css b/src/themes/applied.css
index 7cecc5293..a30ac8a1f 100644
--- a/src/themes/applied.css
+++ b/src/themes/applied.css
@@ -43,15 +43,23 @@ body {
   -webkit-text-size-adjust: none;
 }
 
-/* Show custom elements only after they're registered */
-:where(:not(:defined, [did-ssr])),
-:where(:not(:defined, [did-ssr])) * {
-  opacity: 0;
+@keyframes wa-fade-in {
+  from {
+    opacity: 0;
+  }
 }
 
-:where(:defined) {
-  opacity: 1;
-  transition: 0.1s opacity;
+/* Show custom elements only after they're registered */
+:where(:not(:defined, [did-ssr])) {
+  &,
+  & * {
+    /*
+     * if an element gets defined earlier than 800ms, the animation stops applying so it just appears (no fade)
+     * If it takes somewhere between 800 and 1000 ms, then you may get an interrupted fade
+     * If an element takes longer than 1000ms to get defined, it fades in over 200ms
+     */
+    animation: 200ms 800ms wa-fade-in both;
+  }
 }
 
 /* Content flow */