How to write an inline keyframe?

[lucgagan]

I have an adhoc keyframe that I want to use just in one place.

Is there a way other than defining the keyframe at the theme level?

I just need it here:

<div
  className={css({
    animation: 'rotation 30s infinite linear',
    borderRadius: '8%',
    boxShadow: `
    inset 0 0 50px #fff,
    inset 20px 0 80px #5423E7,
    inset -20px 0 80px #ef4444,
    inset 20px 0 300px #563fb3,
    inset -20px 0 300px #ea6e15,
    0 0 50px #fff,
    -10px 0 80px #5423E7,
    10px 0 80px #f7d738;
  `,
    display: 'none',
    height: '600px',
    left: 'calc(50% - 300px)',
    pointerEvents: 'none',
    position: 'absolute',
    sm: {
      display: 'block',
    },
    top: 'calc(45% - 300px)',
    width: '600px',
  })}
/>

The only examples I could find in documentation define it at the theme level

https://panda-css.com/docs/customization/theme#keyframes

[anubra266]

@lucgagan It's not possible to do that in panda.

[lucgagan]

So what's the closest workaround... ?

[cgatian]

🦗