@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.6 → 0.1.8

package/src/styles/utilities/battery-conscious-animations.css

@@ -0,0 +1,289 @@
+/* Battery-Conscious Mobile Animations CSS */
+
+/* Base battery-conscious animation class */
+.battery-conscious-animation {
+  transition: all 0.3s ease-out;
+  will-change: transform, opacity;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+/* Battery-aware animation variants */
+.battery-optimized-animation {
+  transition: all 0.2s ease-out;
+  will-change: transform;
+  transform: translateZ(0);
+}
+
+.battery-critical-animation {
+  transition: opacity 0.1s linear;
+  will-change: opacity;
+  transform: none;
+}
+
+/* Performance-based animation classes */
+.performance-throttled-light {
+  transition: all 0.25s ease-out;
+  will-change: transform, opacity;
+}
+
+.performance-throttled-moderate {
+  transition: all 0.2s ease-out;
+  will-change: transform;
+}
+
+.performance-throttled-aggressive {
+  transition: opacity 0.15s linear;
+  will-change: opacity;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .battery-conscious-animation,
+  .battery-optimized-animation,
+  .battery-critical-animation,
+  .performance-throttled-light,
+  .performance-throttled-moderate,
+  .performance-throttled-aggressive {
+    animation: none !important;
+    transition: opacity 0.1s linear !important;
+    transform: none !important;
+  }
+  
+  /* Ensure essential transitions still work */
+  .essential-transition {
+    transition: opacity 0.1s linear !important;
+  }
+}
+
+/* Battery level specific optimizations */
+.battery-low .battery-conscious-animation {
+  transition-duration: 0.2s;
+  transition-timing-function: ease-out;
+}
+
+.battery-critical .battery-conscious-animation {
+  transition-duration: 0.1s;
+  transition-timing-function: linear;
+  transform: none;
+}
+
+/* Performance-based animation adjustments */
+.performance-poor .battery-conscious-animation {
+  transition-duration: 0.15s;
+  transition-timing-function: linear;
+}
+
+.performance-fair .battery-conscious-animation {
+  transition-duration: 0.25s;
+  transition-timing-function: ease-out;
+}
+
+/* Mobile-specific optimizations */
+@media (max-width: 768px) {
+  .battery-conscious-animation {
+    transition-duration: 0.25s;
+  }
+  
+  .battery-optimized-animation {
+    transition-duration: 0.2s;
+  }
+  
+  .battery-critical-animation {
+    transition-duration: 0.1s;
+  }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+  .battery-conscious-animation {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+  
+  .battery-optimized-animation {
+    transition-duration: 0.15s;
+  }
+  
+  .battery-critical-animation {
+    transition-duration: 0.08s;
+  }
+}
+
+/* High DPI display optimizations */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .battery-conscious-animation {
+    transform: translateZ(0) scale(1);
+  }
+}
+
+/* Print media optimizations */
+@media print {
+  .battery-conscious-animation,
+  .battery-optimized-animation,
+  .battery-critical-animation,
+  .performance-throttled-light,
+  .performance-throttled-moderate,
+  .performance-throttled-aggressive {
+    animation: none !important;
+    transition: none !important;
+    transform: none !important;
+  }
+}
+
+/* Animation complexity classes */
+.animation-complexity-low {
+  transition: all 0.2s ease-out;
+  will-change: transform;
+}
+
+.animation-complexity-medium {
+  transition: all 0.3s ease-out;
+  will-change: transform, opacity;
+}
+
+.animation-complexity-high {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity, filter;
+}
+
+/* Frame rate optimization classes */
+.frame-rate-30 {
+  animation-duration: 0.033s;
+  transition-duration: 0.2s;
+}
+
+.frame-rate-45 {
+  animation-duration: 0.022s;
+  transition-duration: 0.25s;
+}
+
+.frame-rate-60 {
+  animation-duration: 0.016s;
+  transition-duration: 0.3s;
+}
+
+/* Memory optimization classes */
+.memory-optimized {
+  contain: layout style paint;
+  will-change: auto;
+}
+
+.memory-critical {
+  contain: strict;
+  will-change: auto;
+  transform: none;
+}
+
+/* CPU optimization classes */
+.cpu-optimized {
+  transition: transform 0.2s ease-out;
+  will-change: transform;
+}
+
+.cpu-critical {
+  transition: opacity 0.1s linear;
+  will-change: opacity;
+  transform: none;
+}
+
+/* Accessibility-focused animations */
+.accessibility-optimized {
+  transition: opacity 0.15s ease-in-out;
+  will-change: opacity;
+}
+
+.accessibility-critical {
+  transition: none;
+  will-change: auto;
+}
+
+/* User preference classes */
+.user-preference-performance .battery-conscious-animation {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity, filter;
+}
+
+.user-preference-balanced .battery-conscious-animation {
+  transition: all 0.25s ease-out;
+  will-change: transform, opacity;
+}
+
+.user-preference-battery .battery-conscious-animation {
+  transition: all 0.2s ease-out;
+  will-change: transform;
+}
+
+.user-preference-accessibility .battery-conscious-animation {
+  transition: opacity 0.15s ease-in-out;
+  will-change: opacity;
+}
+
+/* Animation state classes */
+.animation-paused {
+  animation-play-state: paused;
+  transition: none;
+}
+
+.animation-resumed {
+  animation-play-state: running;
+  transition: all 0.3s ease-out;
+}
+
+.animation-disabled {
+  animation: none !important;
+  transition: none !important;
+  transform: none !important;
+}
+
+/* Responsive animation adjustments */
+@media (max-width: 480px) {
+  .battery-conscious-animation {
+    transition-duration: 0.2s;
+  }
+  
+  .animation-complexity-high {
+    transition-duration: 0.25s;
+  }
+}
+
+@media (min-width: 1200px) {
+  .battery-conscious-animation {
+    transition-duration: 0.35s;
+  }
+  
+  .animation-complexity-high {
+    transition-duration: 0.5s;
+  }
+}
+
+/* Dark mode optimizations */
+@media (prefers-color-scheme: dark) {
+  .battery-conscious-animation {
+    transition-timing-function: ease-out;
+  }
+}
+
+/* High contrast mode optimizations */
+@media (prefers-contrast: high) {
+  .battery-conscious-animation {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+/* Animation performance monitoring */
+.animation-monitored {
+  contain: layout style paint;
+  will-change: transform, opacity;
+}
+
+.animation-optimized {
+  contain: layout style;
+  will-change: transform;
+}
+
+.animation-minimal {
+  contain: strict;
+  will-change: auto;
+}