fade in and move down

I have an animation set on my homepage headline using css to make it fade in when the page loads. I have seen on other sites a really impressive animation that will fade in the title and move it down slightly. How would i have to alter my code to be able to achieve this?

<div class="homepage">
    <div class="headline">
        <h1><span>WELCOME</span></h1>
    </div>
    <div class="subheadline">
        <h1>
            <span>To the home of</span>
        </h1>
    </div>
    <div class="subheadline">
        <h1>
            <span>Multimedia Journalist</span>
        </h1>
    </div>
    <div class="subheadline">
        <h1>
            <span>Dan Morris</span>
        </h1>
    </div>

    <a href="#contact" class="smoothScroll" id="contactlink">Let's talk</a>
    <div class="down-link">
        <a class="w-downlink" href="#about">
            <i class="fa fa-chevron-down"></i>
        </a>
    </div>
</div>

.headline {
    height: auto;
    width: 75%;
    margin-left: 78px;
    margin-top: 120px;
    margin-right: auto;
    font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 12px;
    font-weight: 200;
    color: #676767;
    text-align: left;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation: fadeIn 1s ease-in .5s both;
    animation: fadeIn .1s ease-in .5s both;
}