Is there a way to enhance the animation on my homepage headline? Currently, I have set it to fade in when the page loads using CSS.
I came across some sites with impressive animations that not only fade in the title but also move it down slightly. How can I modify my code to achieve a similar effect?
<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;
}