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)无效。为什么？ （使用Chrome）。

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/

无法动画模糊和一起变换

1 个答案: