我是一个HTML + CSS的初学者，我试图复制this glitch effect animation，但codepen使用SCSS文件，而我只使用CSS。Here's my version that is not working properly.的“快速错误故障”动画，使div突然移动不工作。
超文本标记语言

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

`
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;
  /*background-attachment: fixed;*/
}

.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);
  animation: noise-anim 3s infinite linear alternate-reverse,
    shift 4s ease-in-out infinite alternate,
    blur 8s 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: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse,
    shift 4s ease-in-out infinite alternate;
  z-index: -2;
  opacity: 0.7;
}

.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: 1px;
  text-shadow: -3px 0 cyan;
  top: 0;
  color: transparent;
  background: transparent;
  overflow: hidden;
  clip-path: rect(0, 900px, 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 move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(2rem);
  }
}

@keyframes move-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2rem);
  }
}

@keyframes hue-shift {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes animate {
  0%,
  10%,
  100% {
    width: 0;
  }
  70%,
  90% {
    width: 100%;
  }
}

@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);
  }
}
@keyframes noise-anim-2 {
  0% {
    clip-path: inset(85px, 9999px, 47px, 0);
  }
  5% {
    clip-path: inset(89px, 9999px, 13px, 0);
  }
  10% {
    clip-path: inset(37px, 9999px, 24px, 0);
  }
  15% {
    clip-path: inset(50px, 9999px, 89px, 0);
  }
  20% {
    clip-path: inset(49px, 9999px, 93px, 0);
  }
  25% {
    clip-path: inset(64px, 9999px, 68px, 0);
  }
  30% {
    clip-path: inset(24px, 9999px, 98px, 0);
  }
  35% {
    clip-path: inset(84px, 9999px, 11px, 0);
  }
  40% {
    clip-path: inset(66px, 9999px, 36px, 0);
  }
  45% {
    clip-path: inset(1px, 9999px, 37px, 0);
  }
  50% {
    clip-path: inset(99px, 9999px, 78px, 0);
  }
  55% {
    clip-path: inset(13px, 9999px, 46px, 0);
  }
  60% {
    clip-path: inset(11px, 9999px, 19px, 0);
  }
  65% {
    clip-path: inset(24px, 9999px, 57px, 0);
  }
  70% {
    clip-path: inset(25px, 9999px, 70px, 0);
  }
  75% {
    clip-path: inset(60px, 9999px, 94px, 0);
  }
  80% {
    clip-path: inset(29px, 9999px, 97px, 0);
  }
  85% {
    clip-path: inset(92px, 9999px, 96px, 0);
  }
  90% {
    clip-path: inset(27px, 9999px, 46px, 0);
  }
  95% {
    clip-path: inset(45px, 9999px, 17px, 0);
  }
  100% {
    clip-path: inset(26px, 9999px, 19px, 0);
  }
}
@keyframes noise-anim-3 {
  0% {
    clip-path: inset(14px, 9999px, 73px, 0);
  }
  5% {
    clip-path: inset(89px, 9999px, 25px, 0);
  }
  10% {
    clip-path: inset(23px, 9999px, 57px, 0);
  }
  15% {
    clip-path: inset(46px, 9999px, 3px, 0);
  }
  20% {
    clip-path: inset(18px, 9999px, 49px, 0);
  }
  25% {
    clip-path: inset(80px, 9999px, 19px, 0);
  }
  30% {
    clip-path: inset(7px, 9999px, 61px, 0);
  }
  35% {
    clip-path: inset(98px, 9999px, 92px, 0);
  }
  40% {
    clip-path: inset(43px, 9999px, 43px, 0);
  }
  45% {
    clip-path: inset(94px, 9999px, 95px, 0);
  }
  50% {
    clip-path: inset(88px, 9999px, 65px, 0);
  }
  55% {
    clip-path: inset(38px, 9999px, 78px, 0);
  }
  60% {
    clip-path: inset(60px, 9999px, 43px, 0);
  }
  65% {
    clip-path: inset(6px, 9999px, 89px, 0);
  }
  70% {
    clip-path: inset(8px, 9999px, 41px, 0);
  }
  75% {
    clip-path: inset(42px, 9999px, 52px, 0);
  }
  80% {
    clip-path: inset(34px, 9999px, 34px, 0);
  }
  85% {
    clip-path: inset(21px, 9999px, 90px, 0);
  }
  90% {
    clip-path: inset(60px, 9999px, 70px, 0);
  }
  95% {
    clip-path: inset(4px, 9999px, 59px, 0);
  }
  100% {
    clip-path: inset(8px, 9999px, 49px, 0);
  }
}

因此，我决定用我的方式修改SCSS文件，使其在CSS中工作。 最重要的是，我知道codepen链接使用的是旧版本的SCSS，没有使用clip-path: rect(X, X, X, X);，而是使用clip: rect(X, X, X, X);`，所以我改变了它。
我已经尽了最大的努力，我真的很希望这个练习能帮助我提高CSS技能，
谢谢你