css fade on transition for image gallery - html

Question

I have an image gallery set up. It transitions to the next photo like a slideshow. I am trying to figure out how to get the images to fade as the slideshow is transitioning to the next image. I've tried to add transitions and opacity but can't seem to get it right. Thanks for the help!
body {
padding: 0;
margin: 0;
}
.slider-frame {
padding: 0;
overflow: hidden;
height: 800px;
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#keyframes slide_animation {
0% {
left: 0px;
}
10% {
left: 0px;
}
20% {
left: 1200px;
}
30% {
left: 1200px;
}
40% {
left: 2400px;
}
50% {
left: 2400px;
}
60% {
left: 1200px;
}
70% {
left: 1200px;
}
80% {
left: 0px;
}
90% {
left: 0px;
}
100% {
left: 0px;
}
}
.slide-images {
width: auto;
height: auto;
margin: 0 0 0 -2400px;
position: relative;
-webkit-animation-name: slide_animation;
animation-name: slide_animation;
-webkit-animation-duration: 33s;
animation-duration: 33s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.img-container {
height: 800px;
width: 1200px;
margin-left: auto;
margin-right: auto;
position: relative;
float: left;
}
img {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
padding-top: 100px;
padding-right: 100px;
padding-left: 100px;
}
<div class="slider-frame">
<div class="slide-images">
<div class="img-container">
<img src="../../assets/img/debug.jpg" alt="Angular Carousel 1">
</div>
<div class="img-container">
<img src="../../assets/img/actual.png" alt="Angular Carousel 1">
</div>
<div class="img-container">
<img src="../../assets/img/face.png" alt="Angular Carousel 1">
</div>
</div>
</div>

Answer 1

To give a fade in effect the below method can be used and you can alter it to your code.
.
fade-in {
animation: fadeIn ease 20s;
-webkit-animation: fadeIn ease 20s;
-moz-animation: fadeIn ease 20s;
-o-animation: fadeIn ease 20s;
-ms-animation: fadeIn ease 20s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}