寻求CSS无限缩放循环动画实现方案，需支持小屏禁用

可以仅通过CSS实现你需要的无限循环缩放效果，同时能通过媒体查询在小屏设备上禁用动画。先梳理现有代码的问题，再给出完整实现方案：

现有代码的问题 #

• scale(1.5., 1.5) 语法错误：参数里的多余小数点要去掉，应为 scale(1.5, 1.5)
• @keyframes 规则内不能写选择器：你在reduce动画里写的box + box: animation...是无效语法，关键帧只能定义样式变化
• 布局错误：display: relative不存在，应该用position: relative；用inline-block排列卡片容易出现间距问题，建议改用flex布局
• 动画逻辑混乱：拆分多个动画反而增加复杂度，单个关键帧就能实现完整的缩放循环

实现方案 #

思路 #

1. 定义一个包含缩小→保持→放大→保持的关键帧，覆盖单个卡片的完整动画周期
2. 给每个卡片设置相同的动画时长，通过animation-delay错开触发时间，形成依次缩放的衔接效果
3. 初始状态让第一个卡片保持2倍尺寸，其余为默认大小
4. 用媒体查询在小屏设备上移除动画，统一所有卡片尺寸

完整代码 #

HTML

<div class="main-box">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
</div>

CSS

/* 单个关键帧实现缩放循环：每个卡片的完整周期为20s，分阶段控制缩放状态 */
@keyframes cardScale {
  /* 0%-20%：保持默认尺寸 */
  0%, 20% {
    transform: scale(1);
  }
  /* 25%-45%：放大到2倍并保持 */
  25%, 45% {
    transform: scale(2);
  }
  /* 50%-100%：缩小回默认尺寸并保持，等待下一轮循环 */
  50%, 100% {
    transform: scale(1);
  }
}

.main-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 50px;
  border: solid yellow;
  margin: 100px auto;
  max-width: 920px;
}

.box {
  width: 100px;
  height: 100px;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: 4px;
  /* 动画时长20s，每个卡片延迟4s（20/5）触发，无限循环 */
  animation: cardScale 20s var(--delay) infinite ease-in-out;
}

/* 初始状态设置第一个卡片为2倍尺寸 */
.box.one {
  --bg: slateblue;
  --delay: 0s;
  transform: scale(2);
}
.box.two {
  --bg: deeppink;
  --delay: 4s;
}
.box.three {
  --bg: dodgerblue;
  --delay: 8s;
}
.box.four {
  --bg: red;
  --delay: 12s;
}
.box.five {
  --bg: yellow;
  --delay: 16s;
}

/* 小屏设备禁用动画，统一卡片尺寸 */
@media (max-width: 768px) {
  .box {
    animation: none;
    transform: scale(1) !important;
  }
  .main-box {
    flex-wrap: wrap;
    margin: 20px;
    padding: 20px;
  }
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

效果说明 #

• 第一个卡片初始为2倍大小，动画开始后先缩小到1倍，随后第二个卡片开始放大，依次循环，形成无缝衔接的效果
• 动画周期为20s，5个卡片每个占据4s的触发窗口，刚好匹配“前一个缩小完成，下一个立即放大”的需求
• 当屏幕宽度小于768px时，所有卡片恢复100px×100px的默认尺寸，动画完全禁用

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