CSS width:fit-content引发伪元素动画抖动问题解决方案

以下为对应测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    :root{
    --maincolor:#000099;
}
    .banner{
    transform: translateX(-250px);
    transition: 0.5s all ease-in;
    animation-name: slide-in;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    position: relative;
    overflow: hidden;
    width: fit-content;
}

.banner:nth-child(2){
    animation-delay: 1.5s;
    animation-duration: 3s;
}
.banner:nth-child(3){
    animation-delay: 3s;
    animation-duration: 4s;
}
@keyframes slide-in {
    0%{
        transform: translateX(-250px);
    }
    50%{
        transform: translateX(1px);
    }
    100%{
        transform: translateX(0);
    }
}
.container-content{
    overflow: hidden;
    margin: 200px 40px;
    font-size: 1.1rem;
}
.container-content h1{
    color: var(--primarycolor);
    text-transform:capitalize;
    font-weight: 600;
}
.container-content #span2{
    color: var(--maincolor);
}
.banner-animate1::before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--maincolor);
    position: absolute;
    animation-name: slide-in-animate1;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    transition: 0.2s all ease;
}
.banner-animate2::before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--maincolor);
    position: absolute;
    animation-name: slide-in-animate2;
    animation-duration: 3s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    transition: 0.2s all ease;
}
.banner-animate3::before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--maincolor);
    position: absolute;
    animation-name: slide-in-animate2;
    animation-duration: 3s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    transition: 0.2s all ease;
}
@keyframes slide-in-animate1 {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(100px);
    }
}
@keyframes slide-in-animate2 {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(200px);
    }
}
@keyframes slide-in-animate3 {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(200px);
    }
}
</style>
<body>
    <div class="container-content">
        <h1 class="banner banner-animate1 " >hello,</h1>
        <h1 class="banner banner-animate2" >my name is</h1>
        <h1 class="banner banner-animate3" >angelo</h1>
    </div>
</body>
</html>

运行上述代码会出现异常：为.banner类设置width: fit-content与overflow: hidden属性实现伪元素滑出时的裁切隐藏效果时，::before伪元素在过渡动画即将结束、完全移出主元素被隐藏前会出现明显抖动，无法实现伪元素流畅无卡顿、无断裂的滑入滑出过渡效果。

• 亚像素渲染跳变：fit-content生成的是随内容自适应的整像素宽度，transform平移计算时会出现非整像素的中间位置，overflow: hidden的裁切边界在CPU重绘计算时，会对边缘的亚像素抗锯齿结果做跳变处理，引发视觉抖动。
• 动画终点临界冲突：伪元素动画使用固定px值作为平移终点，不同内容宽度下，终点位置刚好卡在父元素裁切边界附近，反复触发裁切状态判断，引发跳变。
• 合成层计算冲突：父元素本身也在执行transform平移动画，父子元素同时做transform变换时，overflow: hidden的裁切边界需要在每一帧重新计算，容易出现计算误差导致抖动。
• 附带代码bug：第三个banner的伪元素错误引用了slide-in-animate2动画，没有使用对应定义的slide-in-animate3，也会导致动画时序不符合预期。

按优先级组合使用以下调整即可完全解决抖动问题：

• 替换裁切方式：把.banner上的overflow: hidden替换为clip-path: inset(0)，二者裁切效果完全一致，但clip-path的裁切计算在GPU合成层完成，不会触发边缘重绘跳变。
• 强制开启硬件加速：给.banner和其所有::before伪元素添加will-change: transform属性，将元素提升为独立合成层，动画全程在GPU侧计算，避免主线程重绘带来的抖动。
• 调整动画终点逻辑：把伪元素动画的平移终点从固定px值改为相对值translateX(calc(100% + 2px))，不管父元素宽度是多少，伪元素都能完全滑出裁切区域，额外加的2px作为亚像素计算缓冲，彻底避免临界位置的跳变。
• 修正第三个banner的动画引用错误，给.banner-animate3::before绑定正确的动画规则，同时删除元素上多余的无效transition属性，避免不必要的过渡计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    :root{
        --maincolor:#000099;
    }
    .banner{
        transform: translateX(-250px);
        animation-name: slide-in;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        position: relative;
        clip-path: inset(0);
        width: fit-content;
        will-change: transform;
    }

    .banner:nth-child(2){
        animation-delay: 1.5s;
        animation-duration: 3s;
    }
    .banner:nth-child(3){
        animation-delay: 3s;
        animation-duration: 4s;
    }
    @keyframes slide-in {
        0%{
            transform: translateX(-250px);
        }
        50%{
            transform: translateX(1px);
        }
        100%{
            transform: translateX(0);
        }
    }
    .container-content{
        margin: 200px 40px;
        font-size: 1.1rem;
    }
    .container-content h1{
        color: var(--primarycolor);
        text-transform:capitalize;
        font-weight: 600;
    }
    .container-content #span2{
        color: var(--maincolor);
    }
    .banner[class*="banner-animate"]::before{
        content: '';
        width: 100%;
        height: 100%;
        background-color: var(--maincolor);
        position: absolute;
        top: 0;
        left: 0;
        animation-fill-mode: forwards;
        will-change: transform;
    }
    .banner-animate1::before{
        animation-name: slide-in-mask;
        animation-duration: 1s;
        animation-delay: 1s;
    }
    .banner-animate2::before{
        animation-name: slide-in-mask;
        animation-duration: 3s;
        animation-delay: 3s;
    }
    .banner-animate3::before{
        animation-name: slide-in-mask;
        animation-duration: 3s;
        animation-delay: 4s;
    }
    @keyframes slide-in-mask {
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(calc(100% + 2px));
        }
    }
</style>
<body>
    <div class="container-content">
        <h1 class="banner banner-animate1" >hello,</h1>
        <h1 class="banner banner-animate2" >my name is</h1>
        <h1 class="banner banner-animate3" >angelo</h1>
    </div>
</body>
</html>

调整后动画全程流畅，不会出现边缘抖动、断裂的问题，同时减少了重复代码，可适配任意宽度的文本内容。

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