Chrome中的CSS模糊动画后内容消失

时间:2018-06-16 18:35:34

标签: css css-animations

这是fiddle,显示了这里发生了什么。我试图创造一种像镜头一样进出镜头的效果,但这种情况会发生在Chrome中(技术上我只尝试过Chromium,但它们基本上是相同的),即使是直截了当的过渡。动画结束后,内容暂时消失,然后重新出现。

有人知道解决这个问题吗? (使用Chrome中的小提琴进行验证;我已尝试过多种有前途的解决方案,但都失败了。)



.blur-animation {
  animation-name: focus;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}

@keyframes focus {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0px);
  }
}

p {
  font-size: 4em;
}

<div class="blur-animation">
  <p>Hello, world</p>
</div>
&#13;
&#13;
&#13;

更新

对不起伙计们,我应该在Chrome而不是Chromium上试过这个;这个问题似乎是Chromium和Android的谷歌应用程序(不是Android上的Chrome)所独有的。我不希望很多人使用Chromium,所以这并不是什么大问题,尽管我很好奇是什么导致了它。

0 个答案:

没有答案