css module

2021-01-07  本文已影响0人  踩坑怪At芬达

css module内使用动画keyframes无效的解决方法

<div class="anmMoveIn"></div>
:global {
  @keyframes framesMoveIn {
    from {
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      transform: translate3d(0, 0, 0);
    }
  }
  
- .anmMoveIn {
+ .anmMoveIn :local{ //在需要调用keyframe的元素后增加:local
    animation-name: framesMoveIn;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-duration: .5s;
    animation-fill-mode: both;
  }
}
上一篇 下一篇

猜你喜欢

热点阅读