跳到主要内容

一个css3动画的问题

最近在写一个前台项目，已经差不多了，但是领导突然让把banner图的切换效果换一下，然而官网特效上没有类似的，所以就自己借鉴（抄）了一下另一个网站的动效，但是，发现一直不生效，我自己写了一个小的demo也是可以生效的，代码大概长这样：

animation:box1 1000ms ease-out 0s;

@keyframes box1{
  0%{
    -webkit-transform:scale(1.05, 1.05);
    transform:scale(1.05, 1.05);
    opacity:1;
  }
  100%{
    -webkit-transform:scale(1.5, 1.5);
    transform:scale(1.5, 1.5);
    opacity:0;
  }
}



但是结果居然是不生效，我还以为是框架的问题，在那里找了好几天，在一篇文章上发现了端倪，因为我们项目都是用的less和css Modules，然后这里需要改组件内部的样式，所以就用到了:global

:global {
  .box: {
    animation:box1 1000ms ease-out 0s;
  }
  @keyframes box1{
    0%{
      -webkit-transform:scale(1.05, 1.05);
      transform:scale(1.05, 1.05);
      opacity:1;
    }
    100%{
      -webkit-transform:scale(1.5, 1.5);
      transform:scale(1.5, 1.5);
      opacity:0;
    }
  }
}

然而我没想到的是关键帧keyframes也会被css modules加上哈希（css modules加哈希是为了不同页面有相同的类名的时候样式不发生冲突），所以当然就无法找到相应的关键帧的名字了，经过一番努力（主要是Google和github），最终在这里找到了想要的答案。

Loading Comments...