I am trying to do simple animation in css but am getting stuck?

Question

So I am trying to animate a css div with top property not being there in the original div style because I want to delay the animation so I put it in the the @keyframes property but it disappears after the animation.

This is the css of the div

.MainTitle {
  left: 5%;
  font-family: 'Londrina Solid', cursive;
  position: absolute;
  color: white;
  font-size: 90px;
  animation: Othertitle 1s 800ms;
}

This is the animation

@keyframes Othertitle {
  from {
    top: 10%;
    opacity: 0;
  }
  to {
    top: 5%;
    opacity: 1;
  }
}

Here is the HTML as well

<div className="MainTitle">
        <p>About</p>
</div>

it runs fine but then dissapears to the bottom of the page. How to make it stay?

Click here to see the problem.

Answer 1

@keyframes Othertitle {
  from {
    top: 10%;
    opacity: 0;
  }
  to {
    top: 5%;
    opacity: 1;
  }
}
.MainTitle {
  position:absolute;
  left: 5%;
  font-family: 'Londrina Solid', cursive;
  position: absolute;
  color: black;
  font-size: 90px;
  animation: Othertitle 1s 800ms;
}

<div class="MainTitle">
        <p>About</p>
</div>

The only two problems:

className is a attribute?

When I tested it in the snippet, the title did not do anything because className should actually be class.

The color is white?

How can you see a white text in a white background? I think you meant background-color.