CSS Transition Property, hover state on images

Question

Hello I'm trying out CSS transition property, and I'm having some trouble, when I hover the main tag, the images transitions into their respective positions which I have given, but as soon as I remove the cursor, the images disappear in an instant, without the transition property which I have set, it works just fine when I'm using only background color instead of image, I want the transition to be applied also when I remove the hover from the images,

This is the CSS code that I have written

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  width: 900px;
  height: 600px;
  margin: 10px auto;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.box {
  width: 300px;
  height: 600px;
  position: absolute;
  top: 0;
  left: -300px;
  transition: ease-out;
  transition: 2s;
}

main:hover .box:nth-child(1) {
  top: 0;
  left: 0;
  background: url('https://picsum.photos/seed/picsum/300/600');
  background-size: cover;
}

main:hover .box:nth-child(2) {
  top: 0;
  left: 300px;
  background: url('https://picsum.photos/id/237/300/600');
  background-size: cover;
}

main:hover .box:nth-child(3) {
  top: 0;
  left: 600px;
  background: url('https://picsum.photos/300/600.jpg');
  background-size: cover;
}

<main>
  <div class="box">

  </div>
  <div class="box">

  </div>
  <div class="box">

  </div>
</main>

Answer 1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  width: 900px;
  height: 600px;
  margin: 10px auto;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
  transition: ease-in-out;
  transition: 2s;
}

.box {
  width: 300px;
  height: 600px;
  position: absolute;
  top: 0;
  left: -300px;
  transition: ease-in-out;
  transition: 2s;
  left: 0;
  background-size: cover;
}

main:hover .box:nth-child(1) {
  top: 0;
  left: 0;
  background: url('https://picsum.photos/seed/picsum/300/600');
  background-size: cover;
}
.box:nth-child(1) {
  top: 0;
  left: -300px;
  background: url('https://picsum.photos/seed/picsum/300/600');
  background-size: cover;
}
.box:nth-child(2) {
      top: 0;
      left: -300px;
      background: url('https://picsum.photos/id/237/300/600');
      background-size: cover;
    }
.box:nth-child(3) {
      top: 0;
      left: -300px;
      background: url('https://picsum.photos/id/237/300/600');
      background-size: cover;
    }

main:hover .box:nth-child(2) {
  top: 0;
  left: 300px;
  background: url('https://picsum.photos/id/237/300/600');
  background-size: cover;
}

main:hover .box:nth-child(3) {
  top: 0;
  left: 600px;
  background: url('https://picsum.photos/300/600.jpg');
  background-size: cover;
}

<main>
  <div class="box">

  </div>
  <div class="box">

  </div>
  <div class="box">

  </div>
</main>

this happens because when you're not hovering anymore the image gets removed solution keep the image even without hover... Also transition property should be ease-in-out.

Answer 2

var x = document.getElementsByClassName("box");

var animations = {
  "animation": "animationiteration",
  "OAnimation": "oAnimationIteration",
  "MozAnimation": "animationiteration",
  "WebkitAnimation": "webkitAnimationIteration"
};


for (let i = 0; i < x.length; i++) {

  x[i].addEventListener("animationend", function(e) {
    if (i == 0) {
    x[i].style.left = "0";
    }
    if (i == 1) {
    x[i].style.left = "300px";
    }
    if (i == 2) {
    x[i].style.left = "600px";
    }
    for (let t in animations) {
      if (x[i].style[t] !== undefined) {
        x[i].style[t]="none";
      }
    }
  
});
  x[i].addEventListener("webkitAnimationEnd", function(e) {
    if (i == 0) {
    x[i].style.left = "0";
    }
    if (i == 1) {
    x[i].style.left = "300px";
    }
    if (i == 2) {
    x[i].style.left = "600px";
    }
    for (let t in animations) {
      if (x[i].style[t] !== undefined) {
        x[i].style[t]="none";
      }
    }
  
});
}
// Code for Chrome, Safari and Opera


// Standard syntax
function myEndFunction(el,i) {
  console.log("hi")
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  width: 900px;
  height: 600px;
  margin: 10px auto;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.box {
  width: 300px;
  height: 600px;
  position: absolute;
  left: -300px;
}

main:hover .box:nth-child(1) {
  -webkit-animation: slide1 0.5s forwards;

  animation: slide1 0.5s forwards;

}

main:hover .box:nth-child(2) {
  -webkit-animation: slide2 0.5s forwards;

  animation: slide2 0.5s forwards;

}

main:hover .box:nth-child(3) {
  -webkit-animation: slide3 0.5s forwards;

  animation: slide3 0.5s forwards;

}

main .box:nth-child(1) {
  top: 0;
  background: url('https://picsum.photos/seed/picsum/300/600');
  background-size: cover;
}

main .box:nth-child(2) {
  top: 0;
  background: url('https://picsum.photos/id/237/300/600');
  background-size: cover;
}

main .box:nth-child(3) {
  top: 0;
  background: url('https://picsum.photos/300/600.jpg');
  background-size: cover;
}

@-webkit-keyframes slide1 {
  100% {
    left: 0;
  }
}

@keyframes slide1 {
  100% {
    left: 0;
  }
}

@-webkit-keyframes slide2 {
  100% {
    left: 300px;
  }
}

@keyframes slide2 {
  100% {
    left: 300px;
  }
}

@-webkit-keyframes slide3 {
  100% {
    left: 600px;
  }
}

@keyframes slide3 {
  100% {
    left: 600px;
  }
}

<main>
  <div class="box">

  </div>
  <div class="box">

  </div>
  <div class="box">

  </div>
</main>

Great question, I managed a solution only using a bit of js!