.logo {
    position: absolute;
    top: 10px;
    width: 200px;
    height: 50px; /* controls how much of the text is visible */
    border: solid 2px black;
    overflow: hidden;
}

.logo-text {
    display: block;
    text-align: center;
    opacity: 0;
    transform: translateY(200%); /* starts below the box */
    animation: logoIntro 1s ease forwards;
}

@keyframes logoIntro {
    to {
        opacity: 1;
        transform: translateY(90%); /* slides up into place */
    }
}