dejquery

assets/css/liczby.css

@@ -111,68 +111,76 @@ input[type="number"] {
 
 
 /* Animacje */
-.wsun, .dwsun .okno {
-    animation: Wsun 0.6s ease-in;
+/* AI WYGENEROWAŁO TE KLASY I KEYFRAMEY */
+.pokaz, .dialog-pokaz .okno {
+    animation: Pokaz 0.35s ease-in-out forwards;
 }
 
-@keyframes Wsun {
-    0% {
-        bottom: -40%;
-        opacity: 0;
-    }
-    100% {
-        bottom: 0;
-        opacity: 1;
-    }
-}
-
-.wysun, .dwysun .okno {
-    animation: Wysun 1.5s ease-in;
+.ukryj, .dialog-ukryj .okno {
+    animation: Ukryj 0.35s ease-in-out forwards;
     display: none;
 }
 
-@keyframes Wysun {
-    0% {
-        display: initial;
-        bottom: 0;
-        opacity: 1;
-    }
-    100% {
-        display: initial;
-        bottom: -40%;
-        opacity: 0;
-    }
+.dialog-pokaz {
+    animation: PokazDialog 0.35s ease-in-out forwards;
 }
 
-.dwsun {
-    animation: DWsun 0.6s ease-in;
-}
-
-@keyframes DWsun {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-.dwysun {
-    animation: DWysun 0.6s ease-in;
+.dialog-ukryj {
+    animation: UkryjDialog 0.35s ease-in-out forwards;
     display: none;
+    width: 0 !important;
+    height: 0 !important;
 }
 
-@keyframes DWysun {
+.ukryte, .ukryte * {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+@keyframes Pokaz {
     0% {
-        display: initial;
-        opacity: 1;
+        opacity: 0;
+        transform: translateY(2rem);
     }
     100% {
-        display: initial;
-        opacity: 0;
+        opacity: 1;
+        transform: translateY(0);
     }
 }
 
+@keyframes Ukryj {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+        display: initial;
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(2rem);
+        display: initial;
+    }
+}
+
+@keyframes PokazDialog {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes UkryjDialog {
+    0% {
+        opacity: 1;
+        display: initial;
+    }
+    100% {
+        opacity: 0;
+        display: initial;
+    }
+}
 
 
 /* Dialog */