HTML giving an issue when I try to make a color changing text CSS-CodePudding

I'm trying to make a code where a text continuously changes color, it works but for some reason it gives me an arrow and I don't understand why here is the CSS code

.colorchange {
  font-family: futura;
  font-style: italic;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: #313131;
  font-size: 45px;
  font-weight: bold;
  position: absolute;
  -webkit-animation: colorchange 5s infinite alternate;
}

@-webkit-keyframes colorchange {
  0% {
    color: blue;
  }
  10% {
    color: #8e44ad;
  }
  20% {
    color: #1abc9c;
  }
  30% {
    color: #d35400;
  }
  40% {
    color: blue;
  }
  50% {
    color: #34495e;
  }
  60% {
    color: blue;
  }
  70% {
    color: #2980b9;
  }
  80% {
    color: #f1c40f;
  }
  90% {
    color: #2980b9;
  }
  100% {
    color: pink;
  }
}

and this is the HTML code its effecting:

<h1 >
    <span>hello</span>
</h1>

the error says:

Always define standard rule '@keyframes' when defining keyframes.

Also define the standard property 'animation' for compatibility

it gives this error for some reason even though it works properly could someone tell my why it says this error

CodePudding user response：

You get a warning to use @keyframes instead of @-webkit-keyframes. The -webkit-animation feature is non-standard.

.colorchange {
  font-family: futura;
  font-style: italic;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: #313131;
  font-size: 45px;
  font-weight: bold;
  position: absolute;
  -webkit-animation: colorchange 5s infinite alternate;
}

/* Used "@keyframes" instead of "@-webkit-keyframes". */
@keyframes colorchange {
  0%   { color: blue; }
  10%  { color: #8e44ad; }
  20%  { color: #1abc9c; }
  30%  { color: #d35400; }
  40%  { color: blue; }
  50%  { color: #34495e; }
  60%  { color: blue; }
  70%  { color: #2980b9; }
  80%  { color: #f1c40f; }
  90%  { color: #2980b9; }
  100% { color: pink; }
}

<h1 >
    <span>hello</span>
</h1>

CodePudding user response：

Replace @-webkit-keyframes colorchange by @keyframes and -webkit-animation by animation