Css Can'；不要同时设置模糊和变换的动画

如果我使用这个代码

@-webkit-keyframes blurMe{
  0% {
    -webkit-filter: blur(5px);
  }

  100% {
    -webkit-filter: blur(0px);
  }
}

它会起作用的。 但如果我加上：

0% {
  -webkit-filter: blur(5px);
  -webkit-transform: scale(4,4);
}

100% {
  -webkit-filter: blur(0px);
  -webkit-transform: scale(1,1);
}

我使用这个关键帧的元素只显示比例（从4到2），模糊总是4px； 这意味着当获得100%时，

-webkit filter:blur（0px）

不起作用。为什么？

---

（使用Chrome）。

这很可能是一个Chrome bug。但您应该意识到，当您将三个不稳定（前缀）功能组合在一起时，您将得到一个不稳定的结果^3

作为解决方法，您可以使用两个元素，并对每个元素应用不同的动画：

<div class="outer">
    <div class="inner"></div>
</div>

---

演示：

很抱歉，但这件事没有发生。这一个~~事实上，问题是存在的：顺便说一句，这个bug在新的chromeThis中不存在。它在Chrome45中运行良好，所以我想这个问题现在无关紧要了

.outer,
.inner {
    -webkit-animation: 3s infinite;
}

.outer {
    -webkit-animation-name: scaleMe;
}

.inner {
    width: 100%;
    height: 100%;
    -webkit-animation-name: blurMe;
}

@-webkit-keyframes blurMe {
    from { -webkit-filter: blur(5px); }
      to { -webkit-filter: blur(0);   }
}

@-webkit-keyframes scaleMe {
    from { -webkit-transform: scale(4); }
      to { -webkit-transform: scale(1); }  
}