不能一起动画模糊和变换答案

【问题标题】：Can't animate blur and transform together不能一起动画模糊和变换
【发布时间】：2013-10-03 22:59:15
【问题描述】：

如果我使用此代码

@-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）。

【问题讨论】：

对不起，'pictures,' 或者它没有发生。
jsfiddle.net/TxWE5/1这个~~
确实存在问题：jsfiddle.net/YNLhu
P.S.这个错误在新的 chrome 中不存在
这在 Chrome 45 中运行良好，所以我想这个问题现在无关紧要

标签： css webkit css-animations css-transforms

【解决方案1】：

这很可能是一个 Chrome 错误。但是你应该意识到，当你将三个不稳定（前缀）特征放在一起时，你会得到一个不稳定的^3结果。

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

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

.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); }  
}

演示：http://jsfiddle.net/YNLhu/2/

【讨论】：