amination with opacity problam

hi i want do do that the defult text will be in opacity 0 before the animation start.
i mean that the text will be in opacity 0 and when the animation end (1 second later)
the text will become visible and become opacity 1.

.defult-text{
  position: absolute;
  top: 360px;
  right: 650px;
  text-align: center;
  font-size: 30px;
  font-family: 'Itim';
  color: #c5c6c7;
}



.defult-text { 

  
  animation: fadeIn 3s ;
  animation-delay: 1s;
  
}


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

>Solution :

You can add the following under your declarations:

.defult-text { 
    …
    opacity: 0; /* applies for the time before the animation starts */
    animation-fill-mode: forwards; /* keeps the state after the animation has finsished */
}

Please see: Maintaining the final state at end of a CSS3 animation