Project enabled css_modules, write keyframes invalid do not know why?

the project generated by dva uses less to write styles and wants to write an animation, but it doesn"t work. The code is as follows

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

there is supposed to be animation when it should be initialized, but why doesn"t it work? I don"t know what"s wrong?

Dva.js react.js javascript css3

Mar.13,2021

browser to see what the animation name is on the generated dom, search for this animation name in css, and see if you use postcss's cssnano plug-in

have you solved your problem? I also encountered this kind of problem.
I tested it. Even if I wrote @ keyframes in: global, CSS MODULE will still change his name, so it won't work. I temporarily write keyframes in head's style. I don't know if there is any way for css module not to deal with keyframes naming

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

just write it this way

Previous: How to implement iview-admin dynamic rendering menu

Next: How does the HTML5 drag event prevent dragging to other elements?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e84b19-cfe.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e84b19-cfe.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?