项目启用了css_modules,写keyframes无效不知道为什么？

Question

dva生成的项目里面用less写样式，想着写一个动画，但是却不起作用。代码如下

.box{
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translateX(100px);
}
:global{
  .over{
    animation:mymove 5s infinite;
  }
  @keyframes mymove {
    from { transform: translateX(0px) }
    to { transform: translateX(200px) }
  }
}

dom是这样的
<div className={cx(l.box, 'over')}> </div>

按理说应该初始化就会有动画，可是为什么没有作用？不知道错在哪里？？

Answer 1

浏览器了看看生成的dom上的动画名称是啥，搜索一下css里有没有这个动画名称，看是不是用了postcss的cssnano插件

Answer 2

楼主你的问题解决了吗？我也碰到这种问题了，
我测试了一下， 即使把 @keyframes 写在 :global里面，CSS MODULE还是会改他的名字，所以没法生效，我现在临时把keyframes写在head的style里了， 不知道有没有办法让css module不处理keyframes的命名

Answer 3

@keyframes :global(mymove) {
    from { transform: translateX(0px) }
    to { transform: translateX(200px) }
  }

这么写就好了