CSS动画序列异常：期望干扰→抖动→暂停循环，实际持续抖动

期望实现的CSS动画执行顺序为：信号干扰效果→抖动→暂停，完成后循环重复，但实际效果是信号干扰结束后进入持续抖动状态。以下是原代码：

/* Signal interference effect */
@keyframes interference {
  0% {
    transform: skewX(0)
  }

  31% {
    transform: skewX(-2deg)
  }

  31.5% {
    transform: skewX(89deg)
  }

  32% {
    transform: skewX(89deg)
  }

  32.1% {
    transform: skewX(0)
  }

  33% {
    transform: skewX(2deg)
  }

  54% {
    transform: skewX(0deg)
  }

  94% {
    transform: skewX(2deg)
  }

  95.1% {
    transform: skewX(-3deg)
  }

  95.2% {
    transform: skewX(-89deg)
  }

  95.3% {
    transform: skewX(2deg)
  }

  100% {
    transform: skewX(0)
  }
}

/* Shake from right to left */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-3px);
  }
}

@keyframes none {
  0%,
  100% {
    transform: none;
  }
}

/* effect sequence */
.glitch-sequence {
  animation: interference 1s ease,     /* signal interference for 1 second */
             shake 1s ease 1s,         /* Shake starts after 1 second */
             none 2s linear 2s;        /* Pause starts after 2 seconds */
  animation-iteration-count: infinite; /* Repeat endlessly */
}

<div class="glitch-sequence">Example</div>

问题原因 #

• 当给元素同时设置多个动画并添加animation-iteration-count: infinite时，每个动画会独立无限循环，而非按顺序执行完一轮后整体循环。比如interference动画1秒结束后会立刻重启，shake动画延迟1秒启动后也会无限重复，多个动画叠加导致看起来一直处于抖动状态。
• 自定义的none动画无实际作用，且无法阻止其他动画的循环，无法实现“暂停”效果。

解决方案 #

将三个动画阶段合并为单个关键帧动画，让整个序列作为一个整体无限循环，确保执行顺序严格符合预期。

修改后的代码如下：

/* 合并后的完整动画序列：干扰→抖动→暂停 */
@keyframes glitch-full-sequence {
  /* 0%-25%：信号干扰阶段（总时长4秒，占1秒） */
  0%, 25% {
    transform: skewX(0);
  }
  7.75% {
    transform: skewX(-2deg);
  }
  7.875% {
    transform: skewX(89deg);
  }
  8% {
    transform: skewX(89deg);
  }
  8.025% {
    transform: skewX(0);
  }
  8.25% {
    transform: skewX(2deg);
  }
  13.5% {
    transform: skewX(0deg);
  }
  23.5% {
    transform: skewX(2deg);
  }
  23.775% {
    transform: skewX(-3deg);
  }
  23.8% {
    transform: skewX(-89deg);
  }
  23.825% {
    transform: skewX(2deg);
  }

  /* 25%-50%：抖动阶段（占1秒） */
  25%, 50% {
    transform: translateX(0);
  }
  31.25% {
    transform: translateX(-5px);
  }
  37.5% {
    transform: translateX(5px);
  }
  43.75% {
    transform: translateX(-3px);
  }

  /* 50%-100%：暂停阶段（占2秒） */
  50%, 100% {
    transform: none;
  }
}

.glitch-sequence {
  animation: glitch-full-sequence 4s ease infinite;
}

<div class="glitch-sequence">Example</div>

代码说明 #

• 总动画时长设置为4秒（1秒干扰+1秒抖动+2秒暂停），关键帧按比例分配：
  • 0%-25%：对应原interference动画的所有关键帧，按时间比例缩放至1秒区间
  • 25%-50%：对应原shake动画的关键帧，缩放至1秒区间
  • 50%-100%：保持元素初始状态，实现2秒暂停效果
• 整个动画作为一个整体无限循环，严格按照干扰→抖动→暂停的顺序执行。

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