javascript - 淡入并向下移动

我在首页标题上设置了动画，使用CSS使其在加载页面时淡入。

我在其他网站上看到了一个非常令人印象深刻的动画，该动画会在标题中淡出并稍微向下移动。

我将如何更改我的代码才能实现此目标？

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

最佳答案

只需将top属性与position: relative;一起使用：

https://jsfiddle.net/svArtist/sc7dduue/

.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;
        top: -40px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        top: -40px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}


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

 <div class="homepage">
<div class="headline fadeIn">
<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>

关于javascript - 淡入并向下移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30512295/