Vertical align with CSS3 transform

HTML

<div id="parent">
    <div class="aligned" id="aligned">Sample text
        <div id="animated">ahhhaaaaaaaaaa, gotcha</div>
    </div>

CSS

body {
    font-size: 36px;
}
#parent {
    height: 600px;
    background: #fce;
    transform-style: preserve-3d;
}
.aligned {
    position: absolute;
    top: 150%;
    transform: translateY(-50%);
}
#aligned {
    width: 100%;
    height: 100vh;
    background: #cfe;
}
#animated {
    background: #aaa;
    animation: a 2s infinite;
    -webkit-animation: a 2s infinite;
    position: relative;
}
@-webkit-keyframes a {
    0% {
        top: 0;
    }
    50% {
        top: 50px;
    }
    100% {
        top: 0;
    }
}
@keyframes a {
    0% {
        top: 0;
    }
    50% {
        top: 50px;
    }
    100% {
        top: 0;
    }
}