css中visibility無法執(zhí)行

我在頁面中建了三個div1，div2，div3，前兩個div分別占頁面一半，div3隱藏了，我想做一個點擊當點擊div1的時候，div1,2隱藏，div3顯示的過度效果。但是現(xiàn)在我點擊之后只會實現(xiàn)div1,2的過度效果,div3還是不能顯示出來，只有去掉div1的時候才會顯示，該怎么做才能在三個div同時存在的情況下，還能讓三個過度效果實現(xiàn)呢？
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;
}