fixed transitions. im not a web dev so dont scream

config.json

@@ -3,7 +3,9 @@
         "gm_construct": {
             "images": [
                 "/backgrounds/gm_construct/1.jpg",
-                "/backgrounds/gm_construct/2.jpg"
+                "/backgrounds/gm_construct/2.jpg",
+                "/backgrounds/gm_construct/3.webp",
+                "/backgrounds/gm_construct/4.jpg"
             ],
             "music": [
                 "/music/gm_construct/1.mp3"

effects.js

@@ -22,6 +22,7 @@ async function GameDetails( servername, serverurl, mapname, maxplayers, steamid,
 
             let obj = document.createElement("img");
             obj.classList.add("bgImage");
+            if (i == 0) obj.style.opacity = 1;
             obj.src = imgArray[i].src;
             document.getElementsByClassName("backgroundImages")[0].appendChild(obj);
         }
@@ -34,15 +35,8 @@ async function GameDetails( servername, serverurl, mapname, maxplayers, steamid,
 
         let autoCycleImages = setInterval(() => {
 
-            if (bgObj[prevImage].classList.contains("blendInAnimation"))
-                bgObj[prevImage].classList.remove("blendInAnimation");
-
-            bgObj[prevImage].classList.add("blendOutAnimation");
-
-            if (bgObj[currentImage].classList.contains("blendOutAnimation"))
-                bgObj[currentImage].classList.remove("blendOutAnimation");
-
-            bgObj[currentImage].classList.add("blendInAnimation"); 
+            bgObj[prevImage].style.opacity = 0;
+            bgObj[currentImage].style.opacity = 1;
 
             prevImage = currentImage;
             currentImage++;

style.css

@@ -20,6 +20,9 @@
 
     position: fixed;
 
+    opacity: 0;
+    transition: opacity 2s;
+    
     width: 100vw;
     height: 100vh;
 }
@@ -35,18 +38,12 @@
 
 .blendInAnimation
 {
+    z-index: 10;
     animation-fill-mode: forwards;
     animation-name: blendIn;
     animation-duration: 2s;
 }
 
-.blendOutAnimation
-{
-    animation-fill-mode: forwards;
-    animation-name: blendOut;
-    animation-duration: 2s;
-}
-
 .mapName
 {
     background-color: rgba(0, 0, 0, 0.4);
@@ -101,9 +98,3 @@
     from {opacity: 1;}
     to {opacity: 0;}
 }
-
-@keyframes blendOut
-{
-    from {opacity: 0;}
-    to {opacity: 1;}
-}