🎉 Improved CSS Optimization in Backend Documentation & Styles 🎨

backend/static/css/optimization-animations.css

@@ -1,9 +1,9 @@
 /**
- * MYP Platform - Optimierte einfache Animationen
- * Reduzierte, performante Animationen für bessere User Experience
+ * MYP Platform - Raspberry Pi optimierte minimale Animationen
+ * Nur absolut notwendige, performance-freundliche Animationen
  */
 
-/* ===== EINFACHE FADE-IN ANIMATION ===== */
+/* ===== NUR OPACITY-FADE (GPU-freundlich) ===== */
 @keyframes fade-in {
     from {
         opacity: 0;
@@ -14,69 +14,21 @@
 }
 
 .animate-fade-in {
-    animation: fade-in 0.2s ease-out;
+    animation: fade-in 0.15s ease-out;
 }
 
-/* ===== EINFACHE SLIDE-UP ANIMATION ===== */
-@keyframes slide-up {
-    from {
-        opacity: 0;
-        transform: translateY(15px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+/* ===== REDUZIERTE PROGRESS BAR (ohne Transform) ===== */
+.progress-fill {
+    transition: width 0.8s ease-out;
 }
 
-.animate-slide-up {
-    animation: slide-up 0.3s ease-out;
-}
-
-.animate-slide-up-delay {
-    animation: slide-up 0.3s ease-out;
-    animation-delay: 0.1s;
-    animation-fill-mode: both;
-}
-
-.animate-slide-up-delay-2 {
-    animation: slide-up 0.3s ease-out;
-    animation-delay: 0.2s;
-    animation-fill-mode: both;
-}
-
-/* ===== EINFACHER HOVER-EFFEKT ===== */
-.animate-hover-lift {
-    transition: transform 0.2s ease;
-}
-
-.animate-hover-lift:hover {
-    transform: translateY(-2px);
-}
-
-/* ===== EINFACHE SUCCESS ANIMATION ===== */
-@keyframes simple-success {
-    0% {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.animate-success {
-    animation: simple-success 0.3s ease-out;
-}
-
-/* ===== EINFACHER PULSE FÜR LOADING ===== */
+/* ===== MINIMAL LOADING PULSE ===== */
 @keyframes simple-pulse {
     0%, 100% {
         opacity: 1;
     }
     50% {
-        opacity: 0.6;
+        opacity: 0.7;
     }
 }
 
@@ -84,39 +36,39 @@
     animation: simple-pulse 2s infinite ease-in-out;
 }
 
-/* ===== EINFACHER PROGRESS BAR ===== */
-.progress-fill {
-    transition: width 1s ease-out;
+/* ===== BASIC SUCCESS FADE ===== */
+@keyframes simple-success {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 
-/* ===== PERFORMANCE OPTIMIERUNGEN ===== */
-.animate-fade-in,
-.animate-slide-up,
-.animate-slide-up-delay,
-.animate-slide-up-delay-2 {
-    will-change: transform, opacity;
+.animate-success {
+    animation: simple-success 0.2s ease-out;
 }
 
-.animate-hover-lift {
-    will-change: transform;
-}
-
-/* ===== UTILITY CLASSES ===== */
+/* ===== MINIMALE UTILITY CLASSES ===== */
 .animate-smooth {
-    transition: all 0.2s ease;
+    transition: opacity 0.1s ease;
 }
 
 .animate-smooth-fast {
-    transition: all 0.1s ease;
+    transition: opacity 0.05s ease;
 }
 
+/* ===== ALLE TRANSFORM-ANIMATIONEN ENTFERNT ===== */
+/* Entfernt: slide-up (translateY) */
+/* Entfernt: hover-lift (translateY) */
+/* Entfernt: scale animations */
+/* Entfernt: will-change properties */
+
 /* ===== RESPONSIVE ANPASSUNGEN ===== */
 @media (max-width: 768px) {
-    .animate-fade-in,
-    .animate-slide-up,
-    .animate-slide-up-delay,
-    .animate-slide-up-delay-2 {
-        animation-duration: 0.2s;
+    .animate-fade-in {
+        animation-duration: 0.1s;
     }
 }
 
@@ -127,8 +79,4 @@
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }
-    
-    .animate-hover-lift:hover {
-        transform: none;
-    }
 }