javascript - 淡入并向下移动

Question

我使用 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;
}

Answer 1

只需使用 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>