我在页面中建了三个div1，div2，div3，前两个div分别占页面一半，div3隐藏了，我想做一个点击当点击div1的时候，div1,2隐藏，div3显示的过度效果。但是现在我点击之后只会实现div1,2的过度效果,div3还是不能显示出来，只有去掉div1的时候才会显示，该怎么做才能在三个div同时存在的情况下，还能让三个过度效果实现呢？
html

    <div class="left-side" tabindex="-1"></div>
    <div class="right-side"></div>
    <div class="index-page"></div>

css

.left-side,.right-side {
    width: 50%;
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
    transition:all 0.5s ease-in-out;
}
.left-side {
    background:#E3E3E1;
}
.right-side {
    background: #060604;
}
.index-page {
    z-index:-1;
    transition:all 3.5s linear;
    opacity:0;
    visibility:hidden;
}
.left-side:checked ~ .left-side,.left-side:checked ~ .right-side {
    visibility:hidden;
    opacity: 0;
    z-index:-999;
}
.left-side:checked ~ .index-page {
    visibility: visible;
    opacity:1;
    z-index:999;
}