时间戳

首页 > 解决方案 > React js CSS模块找不到@keyframes

javascript - 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>

标签： javascriptreactjscss-animationskeyframereact-css-modules

解决方案

您必须在以下位置调用动画效果.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>
  )
}

推荐阅读