0

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.

#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 }
}
<div id="message_" class="active">
  <h1 class="five">text</h1>
</div>
ATP
  • 2,939
  • 4
  • 13
  • 34
Potatostudies
  • 31
  • 6

1 Answers1

4

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

animation-fill-mode : forwards;


#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 }
  }
<div id="message_" class="active">
  <h1 class="five">text</h1>
</div>
Mister Jojo
  • 20,093
  • 6
  • 21
  • 40