CSS故障文字动画失效求助：Fast Bug Glitch移动效果无法实现

我是HTML+CSS初学者，尝试复刻一款故障文字动画效果，原示例使用SCSS实现，我转成纯CSS后，其中负责让元素突然偏移的“Fast Bug Glitch”动画完全没生效。我已经把原SCSS里的clip: rect(X, X, X, X)替换成了clip-path: rect(X, X, X, X)，但效果不对，怀疑问题出在clip-path属性或者noise-anim-2这类关键帧代码里，希望能解决这个问题提升CSS技能。

原HTML代码 #

<section>
  <div class="wrap">
    <div class="creativity-title" data-text="CREATIVITY">CREATIVITY</div>
  </div>
</section>

问题排查与修复点 #

1. 伪元素选择器错误：原CSS里的.glitch:before选择器对应不上HTML里的.creativity-title元素，导致青色故障层从未渲染，这是核心问题之一。
2. clip-path语法错误：旧的clip: rect(top, right, bottom, left)和clip-path语法不兼容，clip-path的inset()函数参数顺序为上、右、下、左，且原代码中rect()用法已被废弃，需替换为inset()；同时9999px可替换为100%，更灵活且符合现代规范。
3. 未定义的动画：.creativity-title上引用的shift和blur动画没有对应的@keyframes定义，浏览器会直接忽略这两个无效动画。

修复后的CSS代码 #

.wrap {
  margin-top: 10rem;
  background: black url(/img/Creativity.png) center center no-repeat;
  background-size: contain;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.creativity-title {
  font-family: "Rubik Microbe", cursive;
  font-weight: 600;
  color: white;
  font-size: 100px;
  position: relative;
  margin: 0 auto;
  text-shadow: 0px -5px 10px rgba(255, 255, 255, 1),
    0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0),
    0px 0px 15px rgba(255, 255, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  /* 添加shift动画实现元素偏移效果 */
  animation: noise-anim 3s infinite linear alternate-reverse,
    shift 4s ease-in-out infinite alternate;
}

.creativity-title::after {
  content: attr(data-text);
  position: absolute;
  left: 3px;
  text-shadow: -1px 0 red;
  top: 0;
  color: transparent;
  background: transparent;
  overflow: hidden;
  /* 替换为clip-path: inset语法 */
  clip-path: inset(0 100% 0 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse,
    shift 4s ease-in-out infinite alternate;
  z-index: -2;
  opacity: 0.7;
}

/* 修正伪元素选择器，匹配目标元素 */
.creativity-title::before {
  content: attr(data-text);
  position: absolute;
  left: 1px;
  text-shadow: -3px 0 cyan;
  top: 0;
  color: transparent;
  background: transparent;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  animation: noise-anim-3 3s infinite linear alternate-reverse,
    shift 4s ease-in-out infinite alternate;
  z-index: -1;
  opacity: 0.8;
}

/*Animations*/
@keyframes noise-anim {
  0%,
  40%,
  50%,
  60%,
  90%,
  95%,
  100% {
    text-shadow: 0px -5px 10px rgba(255, 255, 255, 1),
      0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0),
      2px 1px 15px rgba(100, 240, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  }

  45%,
  75% {
    text-shadow: 0px -5px 10px rgba(255, 255, 255, 1),
      0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1),
      2px 1px 15px rgba(100, 240, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1);
  }

  97.5% {
    text-shadow: 0px -5px 10px rgba(255, 255, 255, 0),
      0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0),
      2px 1px 4px rgba(255, 100, 100, 1), 0px 0px 20px rgba(255, 255, 255, 0);
  }
}

/* 修正clip-path为inset语法，参数顺序匹配上、右、下、左 */
@keyframes noise-anim-2 {
  0% {
    clip-path: inset(85px 100% 47px 0);
  }
  5% {
    clip-path: inset(89px 100% 13px 0);
  }
  10% {
    clip-path: inset(37px 100% 24px 0);
  }
  15% {
    clip-path: inset(50px 100% 89px 0);
  }
  20% {
    clip-path: inset(49px 100% 93px 0);
  }
  25% {
    clip-path: inset(64px 100% 68px 0);
  }
  30% {
    clip-path: inset(24px 100% 98px 0);
  }
  35% {
    clip-path: inset(84px 100% 11px 0);
  }
  40% {
    clip-path: inset(66px 100% 36px 0);
  }
  45% {
    clip-path: inset(1px 100% 37px 0);
  }
  50% {
    clip-path: inset(99px 100% 78px 0);
  }
  55% {
    clip-path: inset(13px 100% 46px 0);
  }
  60% {
    clip-path: inset(11px 100% 19px 0);
  }
  65% {
    clip-path: inset(24px 100% 57px 0);
  }
  70% {
    clip-path: inset(25px 100% 70px 0);
  }
  75% {
    clip-path: inset(60px 100% 94px 0);
  }
  80% {
    clip-path: inset(29px 100% 97px 0);
  }
  85% {
    clip-path: inset(92px 100% 96px 0);
  }
  90% {
    clip-path: inset(27px 100% 46px 0);
  }
  95% {
    clip-path: inset(45px 100% 17px 0);
  }
  100% {
    clip-path: inset(26px 100% 19px 0);
  }
}

/* 同样修正clip-path为inset语法 */
@keyframes noise-anim-3 {
  0% {
    clip-path: inset(14px 100% 73px 0);
  }
  5% {
    clip-path: inset(89px 100% 25px 0);
  }
  10% {
    clip-path: inset(23px 100% 57px 0);
  }
  15% {
    clip-path: inset(46px 100% 3px 0);
  }
  20% {
    clip-path: inset(18px 100% 49px 0);
  }
  25% {
    clip-path: inset(80px 100% 19px 0);
  }
  30% {
    clip-path: inset(7px 100% 61px 0);
  }
  35% {
    clip-path: inset(98px 100% 92px 0);
  }
  40% {
    clip-path: inset(43px 100% 43px 0);
  }
  45% {
    clip-path: inset(94px 100% 95px 0);
  }
  50% {
    clip-path: inset(88px 100% 65px 0);
  }
  55% {
    clip-path: inset(38px 100% 78px 0);
  }
  60% {
    clip-path: inset(60px 100% 43px 0);
  }
  65% {
    clip-path: inset(6px 100% 89px 0);
  }
  70% {
    clip-path: inset(8px 100% 41px 0);
  }
  75% {
    clip-path: inset(42px 100% 52px 0);
  }
  80% {
    clip-path: inset(34px 100% 34px 0);
  }
  85% {
    clip-path: inset(21px 100% 90px 0);
  }
  90% {
    clip-path: inset(60px 100% 70px 0);
  }
  95% {
    clip-path: inset(4px 100% 59px 0);
  }
  100% {
    clip-path: inset(8px 100% 49px 0);
  }
}

/* 补充shift动画，实现元素突然偏移的故障效果 */
@keyframes shift {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-3px) translateY(2px);
  }
  20% {
    transform: translateX(2px) translateY(-1px);
  }
  30% {
    transform: translateX(-2px);
  }
  40% {
    transform: translateX(3px) translateY(1px);
  }
  50% {
    transform: translateX(-1px);
  }
  60% {
    transform: translateX(4px) translateY(-2px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px) translateY(1px);
  }
  90% {
    transform: translateX(-1px) translateY(-2px);
  }
}

效果说明 #

• 替换clip-path语法后，红色和青色的文字切片会随关键帧动画显示不同区域，配合shift动画的随机偏移，就能还原原示例的故障文字效果。
• 若需要模糊效果，可自行补充blur动画的@keyframes定义，添加到元素的animation属性中。

内容的提问来源于stack exchange，提问作者Jado Bado