CSS Transition动画故障：大宽度div执行动画时完全消失问题排查

问题根因 #

• 并非2500%宽度过大导致，核心是浏览器图层渲染优化触发的bug，以及动画参数计算错误两个问题：
  1. 超大尺寸元素自动优化：当元素绘制区域远大于视口范围时，浏览器会自动将其判定为非可见元素，跳过渲染流程；你在开发者工具选中该元素时会强制触发该元素的重绘，因此会恢复显示。
  2. 动画位移参数错误：你设置的雪碧图总宽度为2500%对应24帧，单帧宽度为总宽度的1/25，总位移应该是-96%，你设置的-98%会导致动画最后阶段切到空白区域，看起来像元素消失。
  3. 动画触发逻辑错误：默认给.bg-layer添加了5s动画，和.opening类下的动画规则冲突，逻辑不符合原实现要求。

修复方案 #

1. 给.bg-layer添加will-change: transform属性，强制浏览器将该元素提升到独立合成图层，避免自动优化跳过渲染。
2. 修正@keyframes的最终位移值，将100%状态的translateX改为-96%。
3. 移除.bg-layer的默认动画属性，仅保留.opening类下的动画规则，通过类切换触发动画。

修复后CSS代码 #

.cd-transition-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    height: 100%;
    width: 100%;
    /* 隐藏超出视口的雪碧图部分 */
    overflow: hidden;
}

.cd-transition-layer .bg-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 15;
    transform: translateY(-50%) translateX(-2%);
    height: 100%;
    width: 2500%;
    background: url('https://i.imgur.com/9uDdPAP.png') no-repeat 0 0;
    background-size: 100% 100%;
    /* 新增 强制单独图层渲染 */
    will-change: transform;
    animation-fill-mode: forwards;
}

.cd-transition-layer.opening .bg-layer {
    z-index: 15;
    animation: cd-sprite .8s steps(24);
}

@keyframes cd-sprite {
    0% {
        transform: translateY(-50%) translateX(-2%)
    }
    100% {
        /* 修正位移值 */
        transform: translateY(-50%) translateX(-96%)
    }
}

触发动画的JS示例（对应原实现逻辑） #

// 需要触发过渡的时候给父元素添加opening类即可
document.querySelector('.cd-transition-layer').classList.add('opening')

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