Question

在激活硬件加速时（通过will-change或translateZ(0)），CSS转换功能无效，您可以在Chrome 45中为scale(0)设置动画。 45.0.2454.85（64位））

（Firefox 40适用于will-change，但不适用于translateZ(0)）

DEMO ：http://codepen.io/zapdev/pen/ojbdVb （启用硬件加速并隐藏动画停止工作）

我目前的工作：

.hide {
    transform: scale(0.0002);
    opcacity: 0;
    transition: transform 400ms, opacity 0ms 400ms;
    pointer-events: none;
}

修改我在MacOS X上，我的WebGL渲染器是"Intel Iris Pro OpenGL Engine"

另外：Chrome 47.0.2511.0 canary (64-bit)与will-change一起工作（如Firefox 40），但不与translateZ(0)一起工作。看起来will-change通常是硬件加速的方式。

Answer 1

浏览器不知道如何读取转换覆盖。当你使用transform：translateZ（'value'）;你覆盖了比例。

要使它工作，你需要使用scale和translateZ初始化所有div，这样它将以各种方式工作。

VIEW DEMO

div{
  transition: transform 400ms;
  transform:scale(1) translateZ(0);
}

div:hover{
  transform: scale(1.4) translateZ(0);
}

div.hide{
  transform: scale(0) translateZ(0);
}

CSS转换不适用于chrome 45中的scale（0）+硬件加速？

1 个答案: