Edit in JSFiddle

<div id = "contenido"></div>
<div id = "capa"></div>

body{
    margin: 0;
}

#contenido{
    width: 30em;
    height: 17.5em;
    background: aquamarine;
    border: .1em lightgray solid;
}

#capa{
    width: 30.15em;
    height: 0;
    background: black;
    opacity: .75;
    animation: cortina 2.5s;
    -webkit-animation: cortina 2.5s;
    -moz-animation: cortina 2.5s;
    position: absolute;
    top: 0;
}

@keyframes cortina{
    from{
        height: 17.5em;
    }
    to{
        height: 0;
    }
}

@-webkit-keyframes cortina{
    from{
        height: 17.5em;
    }
    to{
        height: 0;
    }
}

@-moz-keyframes cortina{
    from{
        height: 17.5em;
    }
    to{
        height: 0;
    }
}