javascript - 我如何让标题淡入淡出并在使用 css 加载页面时稍微向上移动

Question

在用户使用 css 登陆主页后，我如何让标题淡入并略微向上移动。我想实现的一个很好的例子是在这个网站上 http://www.mikeinghamdesign.com .知道可以使用 translateY 来完成，但我以前从未使用过。

HTML

<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>

CSS

.homepage {
height: 650px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/25H.jpg);
background-attachment: fixed;
float: left;
}

.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;
}

Answer 1

最简单的方法是只使用 CSS 动画:

http://jsfiddle.net/xdbpwoLa/

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

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

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