css module

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;
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS预处理器 我们知道,CSS入门简单但是却有许多弊端。例如: 1、语法不够强大,比如无法嵌套书写,导致模块化开...
    forever_提拉米苏阅读 2,385评论 0 6
  • 在前端开发中一直有个原则,叫做"关注点分离",意思就是各种技术只负责自己的领域,不要混合在一起,形成耦合,这种原则...
    li4065阅读 2,930评论 0 0
  • 遇到问题 在这次的项目中,我在写登录注册模块时,想给注册页面添加一些样式,发现我所添加的样式是全局有效,导致我的登...
    DouQing阅读 3,258评论 2 4
  • 为什么需要CSS模块化 ? 由于CSS的规则是全局性的,添加任何一个样式,在全局都有效,优点是方便复用,缺点是会根...
    Lingli_yu阅读 1,778评论 0 1
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,781评论 1 13