This animation code is working fine but it is showing errors in vs code

February 7, 2022

CSS
This animation code is working fine but it is showing errors in vs code..

 -moz-animation: spinoffPulse 10s infinite linear;
    -webkit-animation: spinoffPulse 10s infinite linear;
 @-moz-keyframes spinoffPulse {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg);  }
    }
    @-webkit-keyframes spinoffPulse {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
    }

Vs code showing error in above animation code but it is working fine in output…Please Answer what is the problem in this code…

html {
  --circle-width: 300px;
}

.circle {  
  aspect-ratio: 1;
  width: var(--circleWidth);
  background-color: black;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  padding: .5rem;
    
-moz-animation: spinoffPulse 10s infinite linear;
-webkit-animation: spinoffPulse 10s infinite linear;
  
}

@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

#addNumBtn {
  position: absolute;
  top: 0;
  left: 0;
}

.numStyle {
  font-family: "roboto", sans-serif;
}

>Solution :

try this code. I hope this is true

html {
  --circle-width: 300px;
}

.circle {  
  aspect-ratio: 1;
  width: var(--circleWidth);
  background-color: black;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  padding: .5rem;

animation: spinoffPulse 10s infinite linear;    
-moz-animation: spinoffPulse 10s infinite linear;
-webkit-animation: spinoffPulse 10s infinite linear;
  
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}

@keyframes spinoffPulse {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(360deg);  }
}

@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

#addNumBtn {
  position: absolute;
  top: 0;
  left: 0;
}

.numStyle {
  font-family: "roboto", sans-serif;
}