问题描述
我正在尝试使用 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>
)
}