css fade in effect does not last after duration-CodePudding

I have a fade in effect based on this answer opacity effect

using @keyframes why does the opacity returns back to 0 / how to disable this ?

.item {
    color: rgb(22, 5, 5);
    animation-name: demo-animation;
    animation-duration: 7s;
  }
  
  @keyframes demo-animation
  {
    5% {
      opacity: .05;
    }
    25% {
      opacity: .25;
    }
    50% {
      opacity: .50;
    }
    75% {
      opacity: 0.75;
    }
      100% {
      opacity: 1;
    }
  }


.text1 {
    font-size: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Document</title>
</head>
<body>

    <div  style="opacity:0">
        <h1 >Test me faided</h1>
    <h1 >faided</h1>
    </div>
    
</body>
</html>

CodePudding user response：

I believe the you need to add a css property to .item.

.item {
    color: rgb(22, 5, 5);
    animation-name: demo-animation;
    animation-duration: 7s;
    animation-fill-mode: forwards; // <- this will result in persisting the last state of the animation (in your case opacity: 1)
}

CodePudding user response：

Because you have set the by default opacity to 0. This makes the text disappear after the animation is over. You need to add animation-iteration-count property if you want to run over and over again. below is the code which fixes the issue.

.item {
    color: rgb(22, 5, 5);
    animation-name: demo-animation;
    animation-duration: 7s;
    animation-iteration-count: infinite;
  }
  
  @keyframes demo-animation
  {
    5% {
      opacity: .05;
    }
    25% {
      opacity: .25;
    }
    50% {
      opacity: .50;
    }
    75% {
      opacity: 0.75;
    }
      100% {
      opacity: 1;
    }
  }


.text1 {
    font-size: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Document</title>
</head>
<body>

    <div  style="opacity:0">
        <h1 >Test me faided</h1>
    <h1 >faided</h1>
    </div>
    
</body>
</html>

CodePudding user response：

This is happening because you set an inline style with the opacity 0. Let the animation handle it.

.item {
    color: rgb(22, 5, 5);
    animation-name: demo-animation;
    animation-duration: 7s;
  }
  
  @keyframes demo-animation
  {
    0% {
      opacity: 0;
    }
    5% {
      opacity: .05;
    }
    25% {
      opacity: .25;
    }
    50% {
      opacity: .50;
    }
    75% {
      opacity: 0.75;
    }
      100% {
      opacity: 1;
    }
  }


.text1 {
    font-size: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Document</title>
</head>
<body>

    <div >
        <h1 >Test me faided</h1>
    <h1 >faided</h1>
    </div>
    
</body>
</html>