issue css keyframe light-CodePudding

i`m begginer :D i want realize project final my github : https://github.com/JoaoVitorFernandesFirmino/text-effect

en = how solve my problem, i'm not understand i tried fix

pt br = como posso resolver esse problema, seguindo um tutorial a risca, deu errado, apos revisar. ainda nao consigo entender o problema

*{
margin: 0px;
padding: 0px; 
}

/* ALINHAMENTO "CENTER BOX" */
.mainbox{ 
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #152C11;
} 

p{
    color: #A4FC52;
}


h1{
    color: #A4FC52;
}

.TextNeon{
padding: 1rem 1rem ;
text-align: center;
}

.TextNeon h1{
font-size: 3rem;
text-align: center;
font-weight: bold;
/* ISSUE ERROR, solution? */
animation: light 1.5s ease-in-out infinite alternate;}

@keyframes light{
from{
 
   color: #fff;
text-shadow: 0 0 10px #00fff2, 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 90px #00fff2;
}

to {
color: lightgrey;
text-shadow: 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 80px #00fff2, 0 1 90px #00fff2;

}

}

<!DOCTYPE html>

<html lang="pt-br">

       <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="styles.css">
       <title>Text light Effect</title>

       </head>
       <body>

              <div class="mainbox">
              <div class="TextNeon"></div>
              <p> Pure  C S S  Effects</p>
              <h1 class="TextColo">CSS EFFECTS</h1>
              </div>   
       
       </div> 
</body>
</html>

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

CodePudding user response：

It was very close. Just a typo and div in wrong place. I also broke the animation down into its individual attributes so you can see what is involved and tweak if necesssary.

* {
      margin: 0px;
      padding: 0px;
    }

    /* ALINHAMENTO "CENTER BOX" */
    .mainbox {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #152C11;
    }

    p {
      color: #A4FC52;
    }


    h1 {
      color: #A4FC52;
      animation: light 1.5s;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
      animation-direction: alternate;
      animation-play-state: running;
      animation-timing-function: ease-in-out;
      font-size: 3rem;
      text-align: center;
      font-weight: bold;
    }


    @keyframes light {
      0% {
        text-shadow: 0 0 10px #00fff2, 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 90px #00fff2;
      }

      100% {
        text-shadow: 0 0 20px #cc0000, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 80px #00fff2, 0 1 90px #00fff2;
      }
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

</head>

<body>

  <div class="mainbox">
    <p> Pure C S S Effects</p>
    <h1>CSS EFFECTS</h1>
  </div>

  </div>
</body>


</html>