Discord Benachrichigung, PWA zum teil implementiert

public/style.css

@@ -1,18 +1,35 @@
 @keyframes pop {
-  0% { transform: scale(0.9); opacity: 0.5; }
-  100% { transform: scale(1); opacity: 1; }
+  0% {
+    transform: scale(0.9);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 .status-box {
   animation: pop 0.3s ease-out;
 }
+
 @keyframes rotate {
-  0% { transform: rotateY(0deg); }
-  50% { transform: rotateY(90deg); opacity: 0.6; }
-  100% { transform: rotateY(180deg); opacity: 1; }
+  0% {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+  50% {
+    transform: rotateY(180deg); /* Half flip */
+    opacity: 0; /* Make the front disappear */
+  }
+  100% {
+    transform: rotateY(360deg); /* Complete flip */
+    opacity: 1;
+  }
 }
 
 .rotate {
   animation: rotate 0.6s ease-in-out;
   transform-style: preserve-3d;
-}
+  backface-visibility: hidden; /* Hide the back during flip */
+}