CSS animation property not working/applying in react - css

Question

EDIT: So, for some reason, the effect did not work/apply when running it locally. But, it works fine when I deployed it to GH pages. Does anyone know why this is?
I have text laid out in a circle that I want to rotate about itself. On plain HTML/CSS/Javascript, it works just fine and I get the desired result. Also, when I tried it out separately on this Codepen it works as well.
However, when I try to run this on the .rotating-circle div every style gets applied except for the animation. Not sure if this is relevant but I am using the CircleType js library to create this circular text.
import React, {useEffect, useRef} from 'react'
import CircleType from 'circletype'
function RotatingCircle() {
const rotatingCircle = useRef();
useEffect(()=> {
new CircleType(rotatingCircle.current).radius(100)
}, [])
return (
<div className="rotating-circle">
<p className="circle" id="rounded-text" ref={rotatingCircle}>
AND THE WORLD KEEPS GOING AROUND AND AROUND AND AROUND
</p>
</div>
)
}
export default RotatingCircle
Here is the SCSS:
.some-class{
.rotating-circle{
font-size: 1rem;
z-index: -999;
font-weight: bold;
color:$secondary;
display: block;
// background: #000;
max-width: 100%;
max-height: 300px;
// border-radius: 50%;
margin-top: -250px;
-webkit-animation: spin1 30s infinite linear;
-moz-animation: spin1 30s infinite linear;
-o-animation: spin1 30s infinite linear;
-ms-animation: spin1 30s infinite linear;
animation: spin1 30s infinite linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 80%;
}
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
#-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
Also, just wanted to add that the .some-class class is applied to an element that this component is nested in.