在同时应用变换缩放和动画后，内容在chrome中模糊

Question

每当页面上有动画时，只有变换缩放元素变得模糊（文本和图像）。这通常仅在Chrome中发生。 JSFiddle here

我已对此进行了调查，但遗憾的是没有得到任何结果。

模糊快照：

只有解决这个问题，我觉得，如果动画对象z-index高于转换后的元素，那对我有用。但在我的情况下，我不能总是将动画对象保持在较高的z-index。 例如

.animated
{
   animation-name: second;
   animation-duration: 60s;
   z-index: 5;
}

.transformed
{
   -webkit-transform: scale(2.5, 2.5);
   z-index: 2;
}

z-index修复后：