时间戳

首页 > 解决方案 > CSS 动画 - filter:blur() 不能与 transform:scale() 一起使用

html - CSS 动画 - filter:blur() 不能与 transform:scale() 一起使用

问题描述

我正在制作一个 CSS 动画，其中文本扩展并变得模糊，然后多次恢复正常。要开始一个新的“阶段”，文本必须在放大之前变得模糊，然后在整个缩放过程​​中保持过滤器，只有在它恢复到初始大小时才会丢失它。这是一种失真效果。

将 filter:blur 置于关键帧 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 }
}

标签： htmlcssanimationcss-animations

解决方案

推荐阅读