как установить переполнение: скрыто; одному элементу

У меня есть div, который скользит по странице. Я просто играю с ключевыми кадрами в CSS, пытаясь узнать, что все, что он может сделать.

Я хочу, чтобы этот div действовал как занавес, поэтому, когда он скользит, все, что позади, изменится. NOw, когда div выходит за рамки того, что может видеть пользователь, браузер позволяет пользователю прокручивать, чтобы увидеть все. Как я могу остановить пользователя от возможности видеть поток из этого элемента ONE? Вот скрипка.

DEMO

Код:

<div class="content"></div>
<div class="hide"><div class="curtain"></div></div>

CSS:

body {
    }
    .hide {overflow: hidden;}
    .curtain {
        -webkit-animation:curtainMove 5s; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;
        margin-left: -2100px;
        margin-top: -300px;
        background-color: black;
        height: 2000px;
        width: 4000px;
        transform:rotate(50deg);
        -ms-transform:rotate(50deg); /* IE 9 */
        -webkit-transform:rotate(140deg); /* Safari and Chrome */
        z-index: 13;
        float: left;
        position:absolute;
    }
    @-webkit-keyframes curtainMove /* Safari and Chrome */{
    from {
        margin-left: -2500px;
        margin-top: -2500px;
    }
    to {
        margin-left: 600px;
        margin-top: 600px;
    }
}
    .content {
    background-color: #9F3;
    height: 1200px;
    width: 740px;
    margin-top: 75px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: 75px;
    position:absolute;
    z-index: 12;
    }