How do I permanently make an element visible in css3?

I'm trying to create a text-based game that a user will only read at the beginning.

and then my button which is called "begin" shows up at the end but the problem is that it fades away and the user will not be able to see it anymore because its hidden

I tried using the animation titled fadeIn to make it visible.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#message_.active h1.five{
    position: relative;
    opacity: 0;
    animation: fadeIn 10s linear;
    animation-delay: 53s;
    font-family: 'Edu SA Beginner', cursive;
    top: 50px;
    left: 160px;
    cursor: pointer;
}

@keyframes fadeIn {
 0%,100% { opacity: 1 }
}

<!-- language: lang-html -->

<div id="message_" class="active">
  <h1 class="five">text</h1>
</div>

<!-- end snippet -->

with a little effort you could have found this on your own...

animation-fill-mode : forwards;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#message_.active h1.five{
  position            : relative;
  opacity             : 0;
  animation           : fadeIn 10s linear;
  animation-fill-mode : forwards;
  animation-delay     : 2s; /* why waiting 53s for a test code to start ? */
  font-family         : 'Edu SA Beginner', cursive;
  top                 : 50px;
  left                : 160px;
  cursor              : pointer;
}

@keyframes fadeIn {
  0%   { opacity: 0 }
  100% { opacity: 1 }
  }

<!-- language: lang-html -->

<div id="message_" class="active">
  <h1 class="five">text</h1>
</div>

<!-- end snippet -->