CSS：可以同时进行两个转换运行吗？

Question

我有一堆按顺序显示的大约一打图像。此幻灯片放映由 javascript（下图）和 css（下图）驱动。我想实现显示图像淡出，同时新图像从右侧滑入。我可以做任何一个，但是当我尝试将两者结合起来时，新图像不会在旧图像完全消失之前出现。在下面的代码中，淡出时间为 1 秒，而滑入过渡持续 1.8 秒。所以我只看到滑入过渡的最后 0.8 秒。

是否可以同时进行两个转换运行，如果可以，应该更改什么来实现这一点？

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
        }
    }

通话：

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

------------ 编辑：---------------------------- --------------------------

当我不小心更改了 javascript 代码，使显示不再设置为 None 时，我注意到同时出现和淡出的图像。所以可能只是问题不在于两个过渡不运行同时发生，而是nw一个正在滑入，看不见，直到旧的消失并占据一席之地。

Answer 1

将 .slides 的位置更改为绝对位置。这确实有效，因为毕竟两个转换是同时运行，但图像并不在彼此之上。按照其他地方的建议设置 z-index 不会改变任何东西。但是，将关键帧设置到左侧可防止在 javascript 移除过渡 class.

时出现位置跳跃

已更改 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
        }
    }

CSS：可以同时进行两个转换运行吗？

CSS: can two transitions run simultaneously?

javascript

css

transition

slideshow