css - CSS动画属性不起作用/在反应中应用

Question

编辑：因此，由于某种原因，该效果在本地运行时不起作用/应用。但是，当我将它部署到 GH 页面时，它运行良好。有人知道为什么吗？

---

我有一个圆形的文本，我想围绕它自己旋转。在普通的 HTML/CSS/Javascript 上，它工作得很好，我得到了想要的结果。此外，当我在此Codepen上单独尝试时，它也可以正常工作。但是，当我尝试在 .rotating-circle div 上运行它时，除了动画之外，每个样式都会被应用。不确定这是否相关，但我正在使用CircleType js 库来创建这个循环文本。

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

这是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);}
        } 

另外，只是想添加 .some-class 类应用于该组件嵌套的元素。

标签： cssreactjssass