jquery - fadeindown 文本动画使用 css 或 jQuery

Question

我的网站主页上有一个标题，其中包含文本和一个 anchor 链接。

我在其他网站上看到当页面加载时文本和图像动画并且想知道这是怎么可能的？

我想为文本标题和副标题设置动画，使其在页面加载时淡入淡出，这怎么可能？

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>

CSS

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

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

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

h1 {
font-size: 40px;
font-weight: 100;
text-transform: uppercase;
color:#FFF;
text-align:left;
}

h1 span {
display: inline-block;
margin-bottom: 5px;
padding: 6px 15px;
background: rgb(0, 200, 200);
background: rgba(52, 119, 206, 0.7);
}

提前致谢。

Answer 1

如果我正确理解了你的问题，这应该就是你要找的。

工作示例:https://jsfiddle.net/usphvwjp/

基本上是在您的内容周围添加一个包装器 div，并将其不透明度设置为 0，然后等待 1 秒，然后在页面加载时淡入。

$(function(){
    setTimeout(function(){
        $(".content").animate({ opacity: 1},1500);
    }, 1000);

});