Develop Reference

my next "section" moves with my javascript animation

I am a junior developer and I am coding my portfolio. I have a problem which is the following:
I put an animation effect typing on a keyboard on a "p" with JS and it moves a lot of my elements.
I managed to fix some with: "position absolute" and some CSS adjustments but the second problem is that I put a JS library to put a dark mode and "position: absolute" makes that the dark mode does not take disregard color changes.
Here is the HTML5 code:
<section class="landing-page">
<p>Luck, <br> web developer <span id="monSpan">html</span> </p> **<-- animation is here**
<div>
<img src="/img/undraw_developer_activity_re_39tg.svg" alt="">
</div>
</section>
<section class="end-landing-page">
<div>
<button>En savoir plus <span class="material-symbols-outlined">
arrow_downward
</span> </button> **<-----the moving div is here**
</div>
</section>
Here is the CSS3 code:
.landing-page {
display: flex;
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: bold;
}
.landing-page p {
padding-left: 10%;
padding-right: 50%;
font-size: 4rem;
}
.landing-page img {
height: 10em;
padding-left: 20%;
padding-right: 9%;
}
.landing-page div {
position: absolute;
padding-left: 40%;
}
#monSpan {
transition: all 0.5s;
background-color: rgb(129, 129, 255);
}
.end-landing-page div {
padding-top: 10%;
padding-left: 8%;
}
.end-landing-page button {
display: flex;
align-items: center;
background-color: rgb(129, 129, 255);
border-radius: 30px;
padding: 10px;
}
as said before I tried with the "position" property and it works but the dark mode library no longer works on these elements
I also tried with the "z-index" property but without result
I am French and use google translation, and there may be bad translations do not hesitate to ask me to rephrase.

The fixed topbar is covering the Heading I'm jumping to

I know this code is REALLY messy, but it's my first project and I'm still learning how to align code correctly. I've tried margin with h2::before in CSS, it kinda worked but with it came other problems regarding the text's formation. I've seen that it is possible to achieve the desired result with the help of JavaScript but I'm a total noob at that.
Hope some of you can help me solve this problem, thanks in advance.
function openNav() {
document.getElementById("mySidenav").style.width = "260px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
background-image: url('https://i.imgur.com/oGNxInf.jpg');
background-size: cover;
margin-top: ;
}
h1 {
position: relative;
text-align: center;
color: orange;
padding: 30px 50px;
margin-left: 0px;
bottom: 15px;
}
figure {
text-align: center;
}
/*nav{
background-color: white;
background-size: ;
/*overflow: hidden; hat verhindert, dass Fenster aufpoppen
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
margin: 20px 20px;
padding:20px 20px;
} */
/*.topbar a{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topbar a:hover {
background-color: gray;
}*/
.input {
float: left;
text-align: ;
padding: 5px 0px;
margin: 10px 0px 10px 800px;
}
button {
float: left;
text-align: center;
padding: 3px 3px;
margin: 10px 0px 10px 0px;
}
.acc {
float: left;
margin: 10px 0px 10px 60px;
}
ul ul {
float: left;
display: none;
background: black;
top: 100%;
padding: 0px 0px;
width: 100%;
}
ul li:hover>ul {
display: block;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
font-size: 6;
padding: 0px 0px;
text-align: center;
}
#topbar {
background: black;
background-size: ;
position: fixed;
top: 0;
left: 0;
padding: 0 0px;
margin: 0;
border-radius: 0;
display: inline-table;
width: 100%;
z-index: 2;
}
ul:after {
content: "";
clear: both;
display: block;
padding: 0px 0px;
}
ul li:hover {
background: gray;
padding: 0px 0px;
}
ul li:hover a {
color: white;
}
ul li a {
display: block;
padding: 15px 40px;
color: orange;
text-decoration: none;
font-size: 100%;
}
ul li ul {
display: none;
position: absolute;
padding: 0px 0px;
}
ul li ul li {
width: 100%;
padding: 0px 0px;
margin: 0px 0px;
text-align: center;
}
.li {
width: 150px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
right: 0;
background-color: black;
overflow-x: hidden;
padding-top: 30px;
transition: 0.5s;
padding-left: 5px;
}
.sidenav a {
padding: 8px 8px 30px 10px;
font-size: 20px;
color: orange;
display: block;
transition: 0.5s;
text-decoration: none;
}
.sidenav a:hover {
color: white;
}
.sidenav .close {
position: absolute;
top: 0;
right: 0px;
font-size: 30px;
padding-top: 0px;
}
.konto {
color: orange;
padding-left: 10px;
padding-bottom: 20px;
text-decoration: underline orange;
}
.Header {
position: relative;
width: 1050px;
height: 100px;
background-color: brown;
padding: 0;
margin-top: 160px;
left: 300px;
z-index: 1;
}
.Header a {
position: relative;
padding: 0px 50px;
text-decoration: none;
color: orange;
bottom: 50px;
left: 140px;
}
.Header a:hover {
color: white;
}
.textblock {
position: relative;
border: solid 3px;
width: 1045px;
height: 3500px;
margin-top: ;
left: 299px;
background: rgba(100, 100, 100, 0.5)
}
.text {
width: 800px;
padding-left: 20px;
}
h2 {
border-bottom: solid 1px black;
padding-top: 0px;
cursor: pointer;
padding-left: 20px;
margin: 0;
position: ;
top: -20px;
}
ol li {
padding: 10px;
margin-top: px;
}
.anchor {
position: relative;
top: ;
}
details>summary h2 {
color: black;
padding-top: ;
cursor: pointer;
}
details summary {
list-style: none;
}
summary:before {
content: "֍";
color: red;
cursor: pointer;
position: relative;
top: px;
}
details[open] summary:before {
content: "֎";
position: relative;
top: px;
cursor: pointer;
}
summary {
height: 100;
margin: 0;
padding: 0;
}
h2::before {
display: block;
content: "";
margin-top: ;
padding-top: ;
pointer-events: none;
}
p {
position: relative;
top: -20px;
}
<!doctype html>
<html>
<head>
<title>Aldia, seeker of truth</title>
</head>
<body>
<ul id="topbar">
<li class="li">Home</li>
<li class="li">Characters
<ul>
<li>Bosses</li>
<li>NPC's</li>
<li>Merchants</li>
</ul>
</li>
<li class="li">World
<ul>
<li>Areas</li>
<li>Shortcuts</li>
<li>Bonfires</li>
</ul>
</li>
<li class="li">Weapons
<ul>
<li>One-Handed</li>
<li>Two-Handed</li>
<li>Ranged Weapons</li>
</ul>
</li>
<input class="input" type="text" placeholder="Search">
<button type="submit"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/OOjs_UI_icon_search-ltr.svg/2000px-OOjs_UI_icon_search-ltr.svg.png" height="10px" width="10px"></button>
<a onclick="openNav()" class="acc" href="#create"><img src="http://getdrawings.com/free-icon/google-account-icon-65.png" height="25px" width="25px"></a>
</ul>
<div id="mySidenav" class="sidenav">
×
<h2 class="konto">Account-Options</h2>
Log In
Register
Delete
Manage
</div>
<div class="Header">
<h1>Aldia, scholar of the first sin</h1>
Description
Lore
Dialogue
Items
Gallery
</div>
<div class="textblock">
<figure>
<img src="https://i.imgur.com/VqTZcGU.png" height="640" width="588" />
<div>
<figcaption>Aldia has become one with the flame after his last experiment turned him into a charred, immortal being.</figcaption>
</div>
</figure>
<div class="text">
<details open>
<summary>
<h2 id="Description" class="anchor">Description</h2>
</summary>
<!--<button type="button" data-toggle="collapse" data-target: "#Des" height="3px" width="3px"></button>-->
<p id="Des" class="collapse">All we see of Aldia are his head and shoulders, his skin color turned gray like ash, maybe caused by the flames that surround his presence. It is speculated that the parts the player sees of Aldia are only part of a giant body that he inherited
after conducting his last experiment. The roots on his head resemble hair and a read eye orb is in one of his sockets. <br>His voice is a mixture of many different voices at one point the Emerald Herald Shanalotte can be heard talking out of
Aldia.</p>
</details>
<details open>
<summary>
<h2 id="Lore" class="anchor">Lore</h2>
</summary>
<p>Aldia is one of the most interesting characters in the dark souls universe. He's tried to uncover the secrets of life by conducting several experiments on others and on himself. He always thought he would find the answer to all his questions in
the curse of the undead, hence why he researched it's origins to a great extend.<br> Discovering the falsehood of Gwyns linking of the first flame, Aldia quickly proclaimed it as "the first sin". As a consequence of the first linking of the
fire, men assumed a fleeting form for every time the fire would fade. They would return to their natural state of being hollow, loosing a piece of themselves for every death they experience. The dark that churns within men marks them as human,
the dark sign limits the boundaries of their humanity, making them less of a human with every loss of life. Aldia sought to find a path that exists outside of the cycle of light and dark, shattering the yoke that binds all humans.<br> The ancient
dragon that is found at the top of dragon shrine is only an illusion created by Vendricks older brother with a giants soul and dragon bones. He probably was inspired by the immortal dragons of the age of ancients, as they exist outside of the
cycle Aldia seeks to break out of. In the age of ancients there was no fire, no dark nor life or death, just a never changing landscape shrouded by fog, consisting of only archtrees and everlasting dragons.<br>In an attempt to create a being
with these properties the Emerald Herald was fabricated but she did not come out as intended. Later on she may has served as means for Aldia to obtain a great amount of souls to become a true monarch, in the end he failed his goal even secluding
his soul from his body, which would explain why we don't get a soul after fighting him at the throne of want. He even narrates the ending indicating that he keeps on living even after his defeat against the bearer of the curse.</p>
</details>
<details open>
<summary>
<h2 id="Dialogue" class="anchor">Dialogue</h2>
</summary>
<p><strong>1st encounter</strong>
<br> "No one has come this far not for a very long while, Young hollow do you wish to shed this curse? Then accept the fate of your ilk and face the trials that await you Unless, you have joined the crestfallen *laughs*"</p>
<p><strong>2nd encounter</strong>
<br> "Young hollow, there are but two paths. Inherit the order of this world, or destroy it. But only a true monarch can make such a choice. Very few indeed have come even this far. And yet your journey is far from over. Half-grown hollow, have
you what it takes, truly?"</p>
<p><strong>3rd encounter</strong>
<br> "Young hollow, seek after Vendrick. He who almost became a true monarch. Vendrick is certain to guide your way Fledgling Hollow, may we meet again."</p>
<p><strong>Undead Crypt</strong>
<br> "Heheh, I believe we’ve been acquainted Young Hollow, conqueror of fear What drives you so to overcome this supposed curse?"
<br> "Life is brilliant. Beautiful. It enchants us, to the point of obsession. Some are true to their purpose though they are but shells, flesh and blood. One man lost his own body, but lingered on as a head. Others chase the charms of love,
however elusive. What is it that drives you?"
<br> "Once, the Lord of Light banished Dark, and all that stemmed from humanity And men assumed a fleeting form. These are the roots of our world Men are props on the stage of life, and no matter how tender, how exquisite A lie will remain a
lie. Young Hollow, knowing this, do you still desire peace?" Choice – No (asks for a yes or no) "Vendrick, the near true monarch, is here and not far off. But what is a king? You, neither born with greatness nor granted it by the fates, what
is it that you seek? You cannot even say yourself. We shall meet again, young Hollow."
</p>
<p><strong>Dragon Shrine</strong>
<br> "Young Hollow. How you grapple, without falter, with this dreadfully twisted world."
<br> "Peace grants men the illusion of life Shackled by falsehoods, they yearn for love, unaware of its grand illusion. Until, the Curse touches their flesh. We are bound by this yoke. As true as the Dark that churns within men."
<br> "All men trust fully the illusion of life. But is this so wrong? A construction, a façade and yet. A world full of warmth and resplendence. Young hollow are you intent on shattering the yoke spoiling this wonderful falsehood?
<p>Yes or no choice</p>
I am Aldia. I sought to shed the yoke of fate, but failed. Now, I only await an answer. Seek the throne. Seek light, Dark, and what lies beyond…"
</p>
<p><em>With peace Aldia probably means the linking of the flame. When the fire is linked the curse temporarily disappears, granting men the illusion called life.</em></p>
<p><strong>Throne of Want</strong>
<br> When entering the first time (speaks with many voices – a woman included): "Many monarchs have come and gone One drowned in poison, another succumbed to flame, Still another slumbers in a realm of ice. Not one of them stood here, as you
do now. You, conqueror of adversities. Give us your answer"
<br> Has no dialogue when re-entering</p>
<p><em>The voice of a woman is the voice of Shanalotte, a being created by Aldia, a part of him.</em></p>
<p><strong>After defeating Aldia:</strong>
<br> "I lost everything but remained here patiently The throne will certainly receive you But the question remains… What do you want, truly? Light? Dark? Or something else entirely…"</p>
<p><strong>When choosing to leave the throne room:</strong>
<br> "There is no path. Beyond the scope of light, Beyond the reach of dark… …what could possibly await us? And yet, we seek it, insatiably Such is our fate…"</p>
</details>
<details open>
<summary>
<h2 id="Items" class="anchor">Items</h2>
</summary>
<ol type="I">
<li>Aldia Hammer</li>
<li>Malformed Shell</li>
<li>Spitfire Spear</li>
<li>Aldia Key</li>
<li>Southern Ritual Band</li>
<li>Northern ritual Band</li>
<li>Sunset Staff</li>
<li>Soul Geyser</li>
<li>Unleash Magic</li>
<li>Forbidden Sun</li>
</ol>
</details>
<details open>
<summary>
<h2 id="Gallery" class="anchor">Gallery</h2>
</summary>
<p>Hello world I'm cool</p>
</details>
</div>
</div>
</html>

You can try using the :target pseudo-class and add it like this .anchor:target{padding-top:100px}
It will only add padding when using the anchor tag.

Website slide up animation

Hello so i have this css code that lets the text appear as you hover over their titles, but i think an animation going up then having the text appear is an even better effect.
THIS IS THE MAIN CODE:
<div class="page" id="proj-dev">
<div class="container-fluid">
<div class="row">
<blockquote class="col-md-4" id="sw-web">
<div class="quote">
<span class="intro">Software and Web Development</span>
<span class="more"> We create software applications that solve complex business problems without giving up on user experience. From application architecture and database design through application development and deployment, we take care of all aspects of developing an enterprise level software application.</span>
</div>
</blockquote>
<blockquote class="col-md-4" id="game-dev">
<div class="quote">
<span class="intro">Game Development</span>
<span class="more">In addition to software & web developments, the team is also focused on distributing aggregated games, developing games and customer applications, rebranding and porting. Our experienced team strive to deliver games that push the edges of the medium through gameplay, art, and pie.</span>
</div>
</blockquote>
<blockquote class="col-md-4" id="art-design">
<div class="quote">
<span class="intro">Arts and Designs</span>
<span class="more">Our graphic design division delivers compelling and inspired print materials to promote your communication efforts. We strive to provide you with a visually consistent, cohesive image. We ensure that your users can easily learn and accomplish basic tasks the first time they encounter the design.</span>
</div>
</blockquote>
</div>
</div>
</div>
THIS IS MY CSS FILE
#proj-dev {
padding: 0;
}
#proj-dev h2 {
display: none;
}
#proj-dev blockquote {
margin: 0;
padding: 0;
border-left: none;
min-height: 500px;
position: relative;
}
#proj-dev blockquote .quote {
background-color: rgba(255,255,255,.9);
padding: 20px 5%;
position: absolute;
bottom: 0;
width:400px;
font-weight: 400;
border-radius: 0 50px 0 0;
}
#proj-dev #sw-web {
background:url(../images/dummy.jpg) no-repeat center center;
background-size: cover;
}
#proj-dev #game-dev {
background:url(../images/dummy.jpg) no-repeat center center;
background-size: cover;
}
#proj-dev #art-design {
background:url(../images/dummy.jpg) no-repeat center center;
background-size: cover;
}
#proj-dev .quote {
font-size:20px;
line-height: 110%;
font-weight: 400;
}
#proj-dev .quote .more, #proj-dev .customer {
font-size: 0;
line-height: 0;
padding-top: 10px;
}
#proj-dev .quote:hover .more {
font-weight: 100;
display: block;
font-size:18px;
line-height: 120%;
}
#proj-dev .quote:hover .customer {
display: block;
font-size: .7em;
text-align: right;
}

JavaScript Enabled Scroll Fixed Nav Bar Trouble

I have a JavaScript enabled scrolling nav bar. It starts below a hero graphic then sticks to the top when it gets to the top. It works perfectly, however, when it reaches the top it causes the div below it to snap to the top instead of smoothly getting there. It's hard to explain so here's the code.
I know what's happening: Once the nav bar reaches the top, it stacks above the div causing the div to "jump." I just can't figure out how to make it smoother.
Here's the code and thanks for your thoughts!
<body>
<div class="home-hero-image">
<h1>Assemble</h1>
</div>
<div class="header">
<div class="header_container">
<div class="header_onecol">
<ol>
<li class="links">Blog</li>
<li class="links">Members</li>
<li class="links">Technology</li>
<li class="links">Contact Us</li>
</ol>
</div>
</div>
</div>
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</body>
body {
font-family: Helvetica, Arial, Sans-serif;
font-style: normal;
font-weight: 200;
color: #888888;
margin: 0;
padding: 0;
font-size: 100%;
display: block;
text-align: center;
}
p {
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
.home-hero-image {
height: 250px;
background: url('../images/hero_image.jpg') no-repeat;
z-index: -1;
}
h1 {
color: white;
float: right;
padding-right: 5%;
font-size: 5em;
}
.header {
height: 77px;
position: relative;
clear: both;
background-color: white;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
.fixed {
position:fixed;
top:0px;
right:0px;
left:0px;
padding-bottom: 7px;
z-index:999;
}
.header_container {
width: 75%;
margin: 0 auto;
padding: 0 12px;
}
.header_onecol {
width: 97%;
height: 40px;
margin: 1%;
display: block;
overflow: hidden;
background-image: url('../images/Logo.png');
background-repeat: no-repeat;
padding-top: 24px;
}
<script language="javascript" type="text/javascript">
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
</script>

When a div is fixed, it will no longer take up "space", meaning the next div will do exactly as you described -- stack up near the top.
Consider wrapping all of your content after the header using a div:
<div class="header">
...
</div>
<div class="main-body">
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</div>
When we fix the header, we can add top-padding equal to the height of the header to the main-body div to prevent it from jumping.
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
$(".main-body").css("padding-top", fxel.height());
fxel.addClass("fixed");
} else {
$(".main-body").css("padding-top", 0);
fxel.removeClass("fixed");
}
});
JSFiddle here
Hope this helps!

jquery show() breaks css position properties while acting

my problem is in my website,when I load the page and click Home,if article is visible on screen, the js I've written hides it smoothly and great with no problem.but when I click the About Us Link,it shows the article but with broken css position while its act is finished.
here is the code:
HTML:
<nav>
<ul class="sf-menu sf-vertical">
<li><a href=# onclick=home()>Home</a></li>
<li><a href=#about onclick=about()>About Us</a></li>
<li><a href=#>Cuisines</a>
<ul>
<li><a href=#starters>Starters</a></li>
<li><a href=#>Main Dishes</a></li>
<li><a href=#>Desserts</a></li>
<li><a href=#>Mezes</a></li>
</ul>
</li>
<li><a href=#>Wine List</a></li>
<li><a href=#gallery>Gallery</a></li>
<li><a href=#contacts>Contacts</a></li>
</ul>
</nav>
<article class=vanished id=about>
<h1>About Us</h1>
<div class="main-wrapper scroll">
<div class="wrapper clearfix">
<img src=img/bazar-place.png alt=bazar-place width=222 height=150 class=about-img>
<h4>Our Restaurant</h4>
<p>Bazar is a restaurant located between the districts Haga and Vasastaden in Gothenburg with a focus on Turkish and Persian food of the best quality that creates opportunities for an exciting mix all the way, from appetizer to dessert.</p>
</div>
<div class="wrapper clearfix">
<img src=img/belly.jpg alt=belly-dancing width=222 height=167 class=about-img id=belly>
<h4>Events</h4>
<p>Every Saturday from 21, we have Belly dancing at Bazar.</p>
</div>
<div class="wrapper clearfix">
<img src=img/food.jpg alt=food-services width=222 height=167 class=about-img id=food>
<h4>Food Services</h4>
<p>Taste our famous pasta dish to the human price of 69 :- We offer 10% discount for take-away at our entire menu.</p>
<p>At lunchtime you can choose from three Turkish pasta dishes or among two or three different main dishes. Ask about vegetarian options! Drinking, salad and coffee / tea included. Lunch can also be picked up.</p>
</div>
<div class="wrapper last clearfix">
<img src=img/extra.jpg alt=extra-services width=222 height=167 class=about-img id=extra>
<h4>Extra Services</h4>
<p>We can help with everything from after work, kick-off to the birthday called with food and drink that lasts all night. Do you want more entertainment we can arrange live music and belly dancing.</p>
</div>
</div>
</article>
JAVASCRIPT:
function home(){
if ($(".active") == [])
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
}
}
function about(){
if ($(".active") == [])
{
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
}
}
CSS:
article{
position: absolute;
width: 550px;
height: 100%;
background-image: url("../img/blockBG.png");
z-index: 1;
left: 235px;
border-left: 1px solid #4A4A4A;
border-right-color: #7b7b7b;
border-right-style: solid;
border-right-width: thick;
padding-right: 40px;
padding-left: 40px;
text-align: center;
}
.vanished{
display:none;
}
.main-wrapper{
position:relative;
z-index:1;
width: 100%;
height: 590px;
display:block;
}
.wrapper{
border-bottom:1px solid #4A4A4A;
margin-bottom: 15px;
}
.last{
border: none;
}
h4{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:'Yeseva One',cursive;
font-size: 17px;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0;
line-height: 19px;
}
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
p{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:Arial, sans-serif;
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}

The problem is with the <h1> margin-top only being correctly applied at the end of the animation.
Try turning the distance top into a padding instead of margin, it should fix it:
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 0;
padding-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
Alternatively, you could give the parent <article> a padding or border top. This will prevent the <h1> margin from collapsing outside it's container while the animation runs.