css - 不能一起动画模糊和变换

Question

如果我使用此代码

@-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)没有工作。为什么？ （使用铬）。

Answer 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/