CSS: can two transitions run simultaneously?

Question

I have a stack of a dozen or so of images that are shown in sequence. This slide show is motored by javascript (below) and css (further below). I would like to achieve that the showing image fades out while at the same time the new images slides in from the right. I can do either, but when I try to combine the two, the new image doesn't appear before the old one has gone completely. In the code below, the fade-out time is one second whereas the slide-in transition lasts 1.8 seconds. So I see the final 0.8 seconds of the slide-in transition only.

Is it possible to have both transitions run simultaneously and, if so, what shoul be changed to achieve this?

javascript:

var index  = 0;
var pauze  = 0;
var slides = document.getElementsByClassName("slides");
var SPEED  = 4*1000; // Change image every n seconds


// showDivs(index);
show(slides[0]);
carousel();


function step(stepSize)
    {
    next = (index + slides.length + stepSize) % slides.length;
    hide(slides[index]);
    show(slides[next]);
    index = next;
    }


function show(slide)
    {
    slide.classList.add('w3-animate-right');
    slide.style.display = "block";
    }

    
function hide(slide)
    {
    slide.classList.remove('w3-animate-right');
    slide.classList.add('fadeOut');
    setTimeout(function() 
        {
        slide.classList.remove('fadeOut');
        slide.style.display = "none";
        } 
        ,1000);
    }

    
function carousel() 
    {
    if (pauze == 0)
        {
        step(1);
        setTimeout(carousel, SPEED); 
        }
    }

CSS:

.slides 
    {
    position:relative;
    display:none;
    height: 100%;
    width: auto;
    margin: auto;
    border: 2px solid #BBBBBB;
    opacity:1;
    transition: opacity 1s; 
    }

.slides.fadeOut 
    {
    opacity:0;
    }

.w3-animate-right
    {
    position: relative;
    animation: animateright 1.8s
    }

@keyframes animateright
    {
    from
        {
        right: -300px;
        opacity: 0
        }

     to
        {
        right: 0;
        opacity: 1
        }
    }

call:

<img class="slides"> 
    <xsl:attribute name="src"   >images/<xsl:value-of select="filename" /></xsl:attribute>
</img>

---------- EDIT: --------------------------------------------------------

When I accidentally changed the javascript code so that display was no longer set to None, I noticed both fading and coming images side by side. So it might just be that the problem is not that the two transitions do not run simultaneously, but that the nw one is sliding in, out of view, until the old one disappears and makes place.

Answer 1

Change position of .slides to absolute. That does the trick as both transitions were running simultaneously after all, but the images were not on top of each other. Setting the z-index as suggested elsewhere doesn't change anything. However, setting the keyframes to the left side prevents a position jump when the javascript removes the transition class.

Changed CSS:

.slides 
    {
    position:absolute;
    top: 0;
    display:none;
    height: 100%;
    width: auto;
    margin: auto;
    opacity:1;
    border: 2px solid #BBBBBB;
    transition: opacity 1.5s; 
    z-index: 0;
    }

.slides.fadeOut 
    {
    opacity:0.0;
    }


.w3-animate-right
    {
    position: absolute;
    animation: animateright 2s;
    }

@keyframes animateright
    {
    from
        {
        left: 480px;
        opacity: 0
        }

     to
        {
        left: 0;
        opacity: 1
        }
    }