React js CSS模块找不到@keyframes

Posted 2023-02-21

【中文标题】React js CSS模块找不到@keyframes

【英文标题】：React js CSS modules doesn't find @keyframes

【发布时间】：2021-10-07 09:54:50

【问题描述】：

我正在尝试使用 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>

【参考方案1】：

你必须在.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>
  )

【讨论】：

谢谢，但是，我想动态地制作持续时间...

我不明白你所说的动态是什么意思？您的代码没有任何输入