Transition validity

by stopsatgreen

HTML

<div id="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="tre"></div>
</div>

CSS

#container {
    height: 200px;
    position: relative;
}

#container div {
    height: 100px;
    position: absolute;
    width: 100px;
}

.one {
    background-color: red;
    left: 0;
    top: 0;
    -webkit-transition: visibility 1s;
    transition: visibility 2s;
    visibility: visible;
    z-index: 1;
}

.two {
    background-color: green;
    left: 25px;
    top: 25px;
    z-index: 5;
}

.tre {
    background-color: blue;
    left: 50px;
    top: 50px;
    z-index: 10;
}

#container:hover .one { visibility: hidden; }