CSS 幕布开合动画执行结束出现来回闪烁异常问题求助

问题原因 #

你遇到的抖动问题主要来自三个层面：

1. 动画属性选择不合理：用left/right做位移动画会持续触发页面重排（reflow），浏览器需要反复计算元素位置重新渲染，性能开销大，很容易出现卡顿、抖动的情况
2. 宽度计算的小数误差：两个div都设了50vw，当视口宽度为奇数像素时，50vw换算后会出现0.5px的小数，浏览器像素对齐时会出现两个div重叠或者漏缝的情况，动画收尾时就会表现为来回抖动
3. 初始位置用了固定值-1000px，如果屏幕宽度大于1000px，动画初始状态两个div就会漏出，也可能干扰收尾的位置计算

修复方案 #

把位移动画改成用transform: translateX()实现，该属性走GPU加速的合成层，不会触发重排，性能更高，同时调整初始位移值适配所有屏幕尺寸，也能避开宽度小数误差的问题。

修复后的完整代码如下：

HTML（无需修改） #

<body>
    <div id="left"></div>
    <div id="right"></div>
</body>

修复后的CSS #

* {
    margin: 0;
    padding: 0;
}

body {
    background: red;
    /* 避免出现横向滚动条 */
    overflow-x: hidden;
}

#left {
    width: 50vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    animation: leftwing 1s ease-out forwards;
}

#right {
    width: 50vw;
    height: 100vh;
    background-color: yellow;
    position: absolute;
    top: 0;
    right: 0;
    animation: rightwing 1s ease-out forwards;
}

@keyframes rightwing {
    0% {
        /* 初始向右偏移自身100%宽度，完全移出屏幕，适配所有尺寸 */
        transform: translateX(100%);
        background-color: purple;
    }
    100% {
        transform: translateX(0);
        background-color: cyan;
    }
}

@keyframes leftwing {
    0% {
        /* 初始向左偏移自身100%宽度，完全移出屏幕 */
        transform: translateX(-100%);
        background-color: purple;
    }
    100% {
        transform: translateX(0);
        background-color: magenta;
    }
}

如果修改后还有轻微缝隙，可以给其中一个div加margin-left: -1px或者把宽度调整为calc(50vw + 0.5px)，抵消小数像素的对齐误差即可。

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