chrome60+下动画失效了

Question

发现chrome升级之后，一个动画效果突然没了，动画是这么定义的：

  `@keyframes bo {
    0% {
      opacity: 0;
      transform: scale3d(0, 0, 0)
    }

   50% {
     opacity: 1;
     transform: scale3d(.3, .3, 0)
   }

    100% {
      opacity: 0;
      transform: scale3d(.5 , .5,0)
    }
  }`
  

发现0%的时候transform: scale3d(0,0,0) 导致在50%的时候透明度是1了，但是背景色还是没有被渲染出来，在chrome60-的时候是可以渲染的
于是试着改成了 transform: scale(0,0)改成2d渲染，发现没有问题了，有没有人遇到了同样的问题？

Answer 1

https://jsfiddle.net/fxse53Lx/
大概是你的scale3d的z参数为0的关系吧。