How to write the key frame (@keyframes) of css in jsx

My project utilizes the Vue3 framework, which is built using Vite.

When I encapsulate the loading component, I want to incorporate the template and style from a .vue file into a JSX file.

Here is the template:

const myLoad = {
    props: ['msg'],
    render(ctx) {
        const { $props } = ctx
        return (
            <div class="loading">
                <div>
                    <span></span>
                    <p>{ $props.msg }</p>
                </div>
            </div>
        )
    }
}

and I use styils/vue add css in jsx (You can also use another CSS-in-JS library), but i met a problem, in the original css I used keyframes to write animations:

 @keyframes spin {
        to {
            transform: rotateZ(360deg);
        }
    }
span {
        display: block;
        width: 60px;
        height: 60px;
        border: 3px solid transparent;
        border-top-color: #fff;
        border-bottom-color: #fff;
        border-radius: 50%;
        animation: spin ease 1000ms infinite;
    }

How should I write in jsx...

Here is the loading.vue:

<template>
    <div class="loading">
        <div>
            <span></span>
            <p>{{ msg }}</p>
        </div>
    </div>
</template>

  
<script setup>
defineProps({
    msg: {
        type: String
    }
});
</script>

<style lang="scss" >
.loading {
    top: 0;
    z-index: 101;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;

    @keyframes spin {
        to {
            transform: rotateZ(360deg);
        }
    }

    span {
        display: block;
        width: 60px;
        height: 60px;
        border: 3px solid transparent;
        border-top-color: #fff;
        border-bottom-color: #fff;
        border-radius: 50%;
        animation: spin ease 1000ms infinite;
    }

    p {
        color: #fff;
        margin-top: 20px;
    }
}
</style> 

I want the animation is work

const Foo = styled('div',{
  '@keyframes superAnimation': {
    '11.1%': {
      opacity: '0.9999'
    },
    '111%': {
      opacity: '1'
    }
  }
})
// or
import { keyframes } from '@styils/[frame]'

const out = keyframes({
  from: {
    transform: 'rotate(0deg)'
  },
  to: {
    transform: 'rotate(360deg)'
  }
})

const Foo = styled('div',{
  animation: `13s ease 1.5s infinite none running ${out}`
})