目前，我正尝试在一个有几颗流星飞过屏幕的页面上添加一个动画。我希望星星在可用屏幕的一定百分比处出现和结束，以使其在任何设备上都能响应和可见。然而，当我尝试这样做时，我的值看起来默认为0px，而不是我从React组件传递到tailwind.config.js的百分比。2如果我传递像素，这些值就起作用，但正如我提到的，我宁愿做百分比，这样它就可以在任何屏幕上很好地工作。
目前，我正在使用this method传入所需的百分比值，并做了一些修改，使其与React兼容，如下所示：

style={{"--startingX":props.startingX}}

我目前正在使用NextJS和TailwindCSS来尝试做这个。
以下是（我认为是）相关文件：
/components/shootingStar.js

export default function ShootingStar(props) {
    return (
        <div>
            <div style={{"--percentage":props.startingX}} className="absolute animate-star">
                <div className="transform absolute top-2/4 ..."></div>
                <div className="absolute top-full left-2/4 ..."></div>
            </div>
        </div>
    )
}

动画："星"是动画的问题，里面的关键帧我创建了我的自定义动画。
tailwind.config.js：

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        'Quicksand': ['Quicksand', ...defaultTheme.fontFamily.sans],
      }, 
      'animation': {
        ...
        star : "star 3s linear infinite"
      },
      'keyframes': {
        ...
          star: {
            '0%' : {
              transform : 'translateX(var(--percentage)) translateY(0px) rotate(235deg)',
              'opacity': '50%'
            },
            '75%' : {
              'opacity' : '100%'
            },
            '100%' : {
              transform : 'translateX(350px) translateY(500px) rotate(235deg)',
              'opacity' : '0%'
            }
          }
        }
    },
  },
  plugins: [],
}

index.js

return (
    //This div is the parent div to the whole page which is why I included it.
    <div className="bg-gradient-to-tl from-blue-900 to-black overflow-x-auto h-screen w-screen ">
        <ShootingStar startingX={'25%'} startingY={'25%'} endingX={'500px'} endingY={'500px'}</ShootingStar>
        {The remaining shooting stars would eventually get created here}
    </div>
...
)

当动画为0%时，我希望星形组件从屏幕的指定X %开始（例如，如果我将25%传递给我的百分比变量，我希望它从窗口左侧进入屏幕的1/4处开始）。
如果这是可能的，我计划扩展它的起始Y值和X & Y的结束值，这就是为什么我有这些 prop 传入。
如果我将25%传递给我的百分比变量，我的起始值在屏幕的左上角（或0），并允许动画运行。如果我试图将百分比值硬编码到我的关键帧动画中，动画不会发生，因为所有的值在技术上都默认为0。
我期待动画开始在1/4的方式从左手边。
我觉得好像我做了一些轻微的错误，将不允许我使这个动画可能，但我不完全确定这将是什么。