如何解决css帧keyframes在yuicompressor下压缩问题

问题前因

平常我们写css3动画时经常如下写法

@keyframes proBackAction
{
  0% {
    opacity: 1;
  }
  100% {
    opacity: .8;
  }
}

但是在用yuicompressor进行压缩时他会自做主张的把 0%变为0

如下所示：

@keyframes proBackAction
{
  0{
    opacity: 1;
  }
  100% {
    opacity: .8;
  }
}

可是这样的写法在webkit核下无法正常运行

怎么解？

查明原因，这是yuicompressor的一个bug 类似这种情况还有 0px 0s之类，为了压缩嘛！！无底线！！

没办法，只能见招拆招了！！

方案一：把0%写为from to

@keyframes proBackAction
{
  from{
    opacity: 1;
  }
  to {
    opacity: .8;
  }
}

方案二 把0%写为0.00% （试过0.0%都不行）

@keyframes proBackAction
{
  0.00%{
    opacity: 1;
  }
  100% {
    opacity: .8;
  }
}

结论就如此了，以后大家再写就得注意了！！！
或者就摆脱css 直接全用less 这样就不用yui来压缩css文件了，一劳永逸啊！！

---

effevo技术团队出品 （https://effevo.com）