Remove annoying animation

Author: PeterTYLiu

src/components/BottomControls/BottomControls.tsx

@@ -60,19 +60,9 @@ export const BottomControls = () => {
       <Stack gap={1} direction="row" sx={{ alignItems: "center" }}>
         <Box
           sx={{
-            "@keyframes rotate": {
-              from: { "--angle": "0deg" },
-              to: { "--angle": "360deg" },
-            },
-            "--angle": "0deg",
-            backgroundImage:
-              "conic-gradient(from var(--angle), #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c1, #ff0000)",
-            transition: "all 0.5s",
+            backgroundImage: "conic-gradient(#ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c1, #ff0000)",
             borderRadius: 1,
             p: "1px",
-            "&:has(button:hover), &:has(button:focus)": {
-              animation: "rotate 1.6s linear infinite",
-            },
           }}
         >
           <Button

src/index.css

@@ -1,9 +1,3 @@
-@property --angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
-}
-
 html,
 body,
 #root {