如何在CSS属性值变更时触发多属性联动动画效果

实现方案 #

你需要的属性变更触发多属性联动动画，可以通过轻量JS配合CSS动画实现，兼容性好、逻辑可控，是目前最常用的实现方式：

1. 编写CSS动画规则

首先定义切换序列的关键帧，以及元素基础样式：

/* 切换动画：先淡出、等待位置切换、再淡入 */
@keyframes spriteSwitch {
  0% { opacity: 1; }
  35% { opacity: 0; }
  65% { opacity: 0; }
  100% { opacity: 1; }
}

.sprite-img {
  /* 你的原有样式 */
  /* 禁止object-position平滑过渡，保证切换时是突变效果 */
  transition: object-position 0s step-end;
}

/* 动画触发类 */
.sprite-img.is-switching {
  animation: spriteSwitch 0.6s ease forwards;
}

2. 编写触发逻辑

每次要修改object-position时，先触发动画，等透明度降到0的节点再修改位置值，动画结束后重置触发类方便下次调用：

const sprite = document.querySelector('.sprite-img');

// 封装公共切换方法
function changeSpritePosition(newPosition) {
  // 触发切换动画
  sprite.classList.add('is-switching');
  
  // 动画进行到透明度为0的节点时，修改object-position
  setTimeout(() => {
    sprite.style.objectPosition = newPosition;
  }, 210); // 对应CSS动画35%的时间点：0.6s * 0.35 = 0.21s = 210ms

  // 动画结束后移除触发类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('is-switching');
  }, { once: true });
}

// 调用示例：切换到大图的 0 -200px 位置
changeSpritePosition('0 -200px');

优化提示 #

如果需要避免定时器的时间偏移问题，可以监听animationupdate事件精准控制位置修改时机，也可以把动画时长、切换时间点封装成统一变量，避免CSS和JS的配置不一致。
如果只需要兼容现代浏览器，也可以通过@property注册自定义属性、结合CSS动画时间线实现纯CSS的联动触发，不需要JS介入，但兼容性覆盖范围会小很多。

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