React js CSS 模块找不到@keyframes

如何解决React js CSS 模块找不到@keyframes

我正在尝试使用 react css style-inline 来为我的 div 设置动画，目标是仅在相应的 CSS 模块（home.module.css）上使用关键帧旋转，但它不起作用。 每个人都知道为什么似乎从未调用过 @keyframes 吗？

仅当我将 @keyframes 放入 global.css 时才有效

import React from "react"
import classes from "./home.module.css"

export default function Home(){
  return (
      <div 
          className={classes.test} 
          style={{animation: rotation 20s linear infinite}}
      >
        Rotation test
      <div>
  )
}

.test {
  background-color: #ffff
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  } to {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

解决方法

您必须在 .test 中调用动画效果：

.test {
  background-color: #ffff;
  animation: rotation 20s linear infinite;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  } to {
    transform: rotate(360deg);
  }
}

而且您不需要添加内联样式：

export default function Home(){
  return (
      <div className={classes.test} >
        Rotation test
      <div>
  )
}