Home > Software engineering >  This animation code is working fine but it is showing errors in vs code
This animation code is working fine but it is showing errors in vs code

Time:02-08

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

CodePudding user response:

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;
}
  •  Tags:  
  • Related