CSS动画-filter：blur（）无法与transform：scale（）一起使用

Question

我正在研究CSS动画，其中文本会扩展并变得模糊，然后恢复正常几次。要开始新的“阶段”，必须先放大文本，然后放大，然后在整个缩放过程​​中保持过滤器的状态，直到返回初始大小时才将其丢失。这是一种失真效果。

将滤镜：在关键帧0％处模糊以进行第一次缩放即可。但是，在阶段2中，似乎不会在transform：scale之前的某个百分比上设置模糊滤镜。单独使用时，与缩放相同的关键帧中的模糊度是渐进的。我是在做错什么还是固有的限制？我想保持这种效果，而不必为每个阶段创建不同的@keyframes。

@keyframes distortion {
  0% { filter: blur(8px) }
  12% { transform: scaleX(2); filter: blur(8px) }
  12.5% { transform: scaleX(1); filter: blur(8px) }
  12.51% { transform: initial; filter: none }
  50% { transform: initial; filter: none }  /* Pause */
  50.1% { filter: blur(8px) }  /*Phase 2, here's the problem */
  54% { transform: scaleX(2) scaleY(1.1); filter: blur(8px) }
  54.5% { transform: initial; filter: blur(8px) }
  100% { transform: initial }
}