CSS DIV过渡（重叠）

Question

我遇到了一个我似乎无法解决的问题，但是，我相当肯定这是一个简单的错误：

我在index.html主体中有以下内容：

<div id="header-trigger" class="viewport-fullscreen">
    <div class="slider"></div>
    <div class="slider"></div>
</div>
    <div id="section-trigger-01" class="viewport-fullscreen">
</div>

我正在尝试创建一个可以使用ScrollMagic触发的类，因此滑块移动到屏幕的左侧，这当前绑定到slider:active进行测试：

.viewport-fullscreen{
    height: 100%;
    width: 100%
}
.slider{
    background-color: #383838;
        height: 50%;
        width: 100%;
        right:0px;
        clear:both
}
.slider:nth-child(odd){
    background-color: #3d3c3c
}

.slider:active{
    right:calc(100% - 0px);
    transition-property: right, left;
    position:absolute;
    transition-duration: 1s;
}

第二个滑块div工作正常，显示为灰色，点击slowley滑动到屏幕左侧。但是，如果单击第一个滑块div，它将以相同的方式移动，但是，不是显示白色背景，而是另一个div滑块向上移动以填充空间。我认为添加清楚：滑块都可以解决这个问题，但没有运气。

实施例： https://codepen.io/anon/pen/Jpvyxv

任何人都能给我一个抬头？