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