最近使用CSSModule开发react项目，遇到一个问题，使用@keyframes无效，问题如下
/** less + css module **/
:global {
.effect-bottom {
animation: globeRotate 0.5s linear infinite;
} @keyframes globeRotate {
from {
transform: rotate(0deg);
} to {
transform: rotate(-360deg);
}
}
} /** 编译结果如下 **/
.pages-style-gameWrap .effect-bottom {
top: auto;
bottom:;
animation: globeRotate 0.5s linear infinite;
}
@keyframes pages-style-globeRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
可以看到 @keyframes 名称也被编译了，这样就获取不到 @keyframes 的名称了，解决办法如下（只需在调用@keyframes的元素后面添加 :local 就行了）：
:global {
.effect-bottom :local {
animation: globeRotate 0.5s linear infinite;
}
@keyframes globeRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
}
/** 编译结果如下 **/
.pages-style-gameWrap .effect-bottom {
top: auto;
bottom:;
animation: pages-style-globeRotate 0.5s linear infinite;
}
@keyframes pages-style-globeRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}