html keyframes无效,CSS Module解决全局或本地使用@keyframes无效问题

最近使用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: 0;

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: 0;

animation: pages-style-globeRotate 0.5s linear infinite;

}

@keyframes pages-style-globeRotate {

from {

transform: rotate(0deg);

}

to {

transform: rotate(-360deg);

}

}

标签：style,rotate,bottom,globeRotate,keyframes,transform,Module,CSS

来源： https://www.cnblogs.com/victorlyw/p/12295673.html