amination with opacity problam

Question

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; }
  }

use `animation-fill-mode: both;` – Temani Afif Jul 02 '22 at 19:12 — Temani Afif, Jul 02 '22 at 19:12

score 0 · Accepted Answer · answered Jul 02 '22 at 17:21

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

amination with opacity problam

1 Answers1