How to hide div under another during CSS3 animation

The CSS code :

.mainDiv{
    width: 600px;
    height: 600px;
    background-color: blue;
}

.innerDiv{
    width: 400px;
    margin: auto;
    height: 400px;
    background-color: green;
}

.innerDiv div{
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
}


.removing{
    -webkit-animation: slideout 1s;
    animation: slideout 1s;
}

@-webkit-keyframes slideout {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

@keyframes slideout {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

Here is a jsFiddle of the problem.

What i would like it to do is this :

When the first red block moves outside of the green block, i would like it to be behind the blue block instead of in front of it.

Answers


add the line: overflow:hidden; to your .innerDiv css rule


Need Your Help

Dynamic embeddedForm

symfony1 symfony-1.4

I'm looking to add an embeddedForm dynamically in Symfony 1.4 using Doctrine.

How can drag and drop be achieved with Javascript and Wicket 6?

java javascript tree drag-and-drop wicket-6

I have an inventory application in written in Apache Wicket 6, in which I want to add a drag and drop feature in the organisation tree structure which shows the taxonomy of the organisation. So, with

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.