Javascript 为样式化组件中的动画设置关键帧

我试图在我的代码中编写关键帧、动画，但我甚至在阅读文档后也无法理解。请帮忙

```const ButtonStyle = styled.div`
.btn_rainbow {
  text-decoration: none;
  background-color: #c53ab4;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  padding: 8px 16px;
  &:hover {
    background-image: linear-gradient(90deg, 
#00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
    
}

} `;

.悬停时发光{
宽度：220px；
高度：50px；
边界：无；
大纲：无；
颜色：#fff；
背景：#111；
光标：指针；
位置：相对位置；
z指数：0；
边界半径：10px；
}
.悬停时发光：之前{
内容：''；
背景：线性梯度（45度，#ff0000，#ff7300，#fffb00，#48ff00，#00ffd5，#002BF，#7a00ff，#ff00c8，#ff0000）；
位置：绝对位置；
顶部：-2px；
左：-2px；
背景大小：400%；
z指数：-1；
过滤器：模糊（5px）；
宽度：计算（100%+4px）；
高度：计算（100%+4px）；
动画：发光20秒线性无限；
不透明度：0；
过渡：不透明度。3秒轻松进出；
边界半径：10px；
}
.悬停时发光：激活{
颜色：#000
}
.悬停时发光：激活：之后{
背景：透明；
}
.悬停时发光：悬停：之前{
不透明度：1；
}
.悬停时发光：之后{
z指数：-1；
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：#111；
左：0；
排名：0；
边界半径：10px；
}
@关键帧发光{
0%{背景位置：0；}
50%{背景位置：400%0；}
100%{背景位置：0；}
}

点击我！

export default function Button() {
    return (
    <ButtonStyle>
        <a class="btn_rainbow" href="#">Click Me!</a>
    </ButtonStyle>
    );
 }```

```@keyframes slidebg {
   to {
    background-position:20vw;
   }
   }
  .btn_rainbow:hover{
   background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 
 100%);
 animation:slidebg 5s linear infinite;
 }```