FIN INIT

static/css/optimization-animations.css

@@ -0,0 +1,102 @@
+/**
+ * MYP Platform - Minimale Animationen für Raspberry Pi
+ * Nur essentielle Fade-In Animationen für optimale Performance
+ */
+
+/* ===== NUR FADE-IN ANIMATION - MINIMAL ===== */
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.animate-fade-in {
+    animation: fade-in 0.2s ease-out;
+}
+
+/* ===== ALLE TRANSFORM-ANIMATIONEN ENTFERNT ===== */
+/* Entfernt: slide-up, scale-in und alle transform-basierten Animationen */
+
+/* ===== EINFACHER HOVER-EFFEKT - NUR OPACITY ===== */
+.animate-hover-lift {
+    transition: opacity 0.2s ease;
+}
+
+.animate-hover-lift:hover {
+    opacity: 0.8;
+    /* Entfernt: transform - nur opacity change */
+}
+
+/* ===== EINFACHE SUCCESS INDICATION - NUR OPACITY ===== */
+@keyframes simple-success {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.animate-success {
+    animation: simple-success 0.2s ease-out;
+}
+
+/* ===== EINFACHER PULSE FÜR LOADING - REDUZIERT ===== */
+@keyframes simple-pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
+}
+
+.animate-pulse-simple {
+    animation: simple-pulse 2s infinite ease-in-out;
+}
+
+/* ===== EINFACHER PROGRESS BAR - NUR WIDTH ===== */
+.progress-fill {
+    transition: width 0.5s ease-out;
+    /* Reduzierte Dauer für bessere Performance */
+}
+
+/* ===== UTILITY CLASSES - MINIMAL ===== */
+.animate-smooth {
+    transition: opacity 0.2s ease;
+    /* Nur opacity transition */
+}
+
+.animate-smooth-fast {
+    transition: opacity 0.1s ease;
+    /* Nur opacity transition */
+}
+
+/* ===== RESPONSIVE ANPASSUNGEN - MINIMAL ===== */
+@media (max-width: 768px) {
+    .animate-fade-in {
+        animation-duration: 0.1s;
+        /* Noch schneller auf mobilen Geräten */
+    }
+}
+
+/* ===== REDUZIERTE BEWEGUNG UNTERSTÜTZUNG - ERWEITERT ===== */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        transform: none !important;
+    }
+    
+    .animate-hover-lift:hover {
+        opacity: 1 !important;
+        /* Keine Hover-Effekte bei reduzierter Bewegung */
+    }
+}
+
+/* ===== ALLE WILL-CHANGE PROPERTIES ENTFERNT ===== */
+/* will-change Properties können auf schwacher Hardware mehr schaden als nutzen */