feat(app): tests

live_monitor_vue/public/css/animation.css

@@ -0,0 +1,92 @@
+/* Определение анимации */
+@keyframes slide-left {
+  from {
+    transform: translateX(-100vw); /* Старт с -100% по оси X, чтобы меню было скрыто */
+    opacity: 0; /* Начальная прозрачность для плавного появления */
+  }
+  to {
+    transform: translateX(0vw); /* Конечное положение: на месте */
+    opacity: 1; /* Полная видимость */
+  }
+}
+
+@keyframes appear-opacity {
+  from {
+    opacity: 0; /* Начальная прозрачность для плавного появления */
+  }
+  to {
+    opacity: 1; /* Полная видимость */
+  }
+}
+
+.appear-opacity-100 {
+  animation: appear-opacity 0.1s ease-out forwards;
+}
+
+.appear-opacity-200 {
+  animation: appear-opacity 0.2s ease-out forwards;
+}
+
+.appear-opacity-300 {
+  animation: appear-opacity 0.3s ease-out forwards;
+}
+
+.appear-opacity-400 {
+  animation: appear-opacity 0.4s ease-out forwards;
+}
+
+.appear-opacity-500 {
+  animation: appear-opacity 0.5s ease-out forwards;
+}
+
+.appear-opacity-600 {
+  animation: appear-opacity 0.6s ease-out forwards;
+}
+
+.appear-opacity-700 {
+  animation: appear-opacity 0.7s ease-out forwards;
+}
+
+.appear-opacity-800 {
+  animation: appear-opacity 0.8s ease-out forwards;
+}
+
+.appear-opacity-900 {
+  animation: appear-opacity 0.9s ease-out forwards;
+}
+
+.slide-left-100 {
+  animation: slide-left 0.1s ease-out forwards;
+}
+
+.slide-left-200 {
+  animation: slide-left 0.2s ease-out forwards;
+}
+
+.slide-left-300 {
+  animation: slide-left 0.3s ease-out forwards;
+}
+
+.slide-left-400 {
+  animation: slide-left 0.4s ease-out forwards;
+}
+
+.slide-left-500 {
+  animation: slide-left 0.5s ease-out forwards;
+}
+
+.slide-left-600 {
+  animation: slide-left 0.6s ease-out forwards;
+}
+
+.slide-left-700 {
+  animation: slide-left 0.7s ease-out forwards;
+}
+
+.slide-left-800 {
+  animation: slide-left 0.8s ease-out forwards;
+}
+
+.slide-left-900 {
+  animation: slide-left 0.9s ease-out forwards;
+}