Android设备滚动时CSS @keyframes动画引发页面闪烁问题求助

问题本质原因 #

你遇到的闪烁问题核心在于：修改元素width的CSS动画会触发页面回流，而Android移动端浏览器（WebView/Chrome）在同时处理回流型动画和页面滚动时，渲染调度容易出现冲突：

1. 动画每帧修改width，都会触发浏览器重新计算布局（回流），消耗大量CPU/GPU资源；
2. 页面滚动时，浏览器需要实时更新视口内容，与动画的回流操作抢占渲染资源，导致画面卡顿、闪烁；
3. 移动端默认渲染优化未将这类布局动画元素单独隔离到GPU层，进一步加剧了渲染冲突。

解决办法 #

解决思路是避免使用触发回流的属性做动画，改用GPU加速的属性（如transform），同时优化动画元素的渲染层级：

方案1：用transform: scaleX()替代width动画 #

将进度条的宽度变化改为X轴缩放，transform属性由GPU处理，不会触发回流，能大幅降低渲染压力：

修改后的CSS代码：

.progressbar {
    animation:                  progressbar-countdown;
    animation-duration:         60s;
    animation-iteration-count:  1;
    animation-fill-mode:        forwards;
    animation-play-state:       running;
    animation-timing-function:  linear;
    -webkit-animation-fill-mode: forwards;
    /* 确保元素被GPU加速 */
    transform-origin: left center;
    will-change: transform;
}

@keyframes progressbar-countdown {
    0% {
        transform: scaleX(1);
        background: #4F4;
    }
    100% {
        transform: scaleX(0);
        background: #F00;
    }
}

同时调整HTML结构，确保缩放不影响其他元素：

<div class="relative h-2 mb-4 text-xs bg-indigo-100">
    <!-- 进度条设为绝对定位，占满父容器宽度 -->
    <div class="progressbar absolute top-0 left-0 h-full shadow-none whitespace-nowrap text-white justify-center bg-primary-500" id='progressbar3'></div>
</div>

方案2：给动画元素开启硬件加速（备选） #

如果必须保留width动画，可尝试强制将元素放到GPU层，减少重绘冲突：

.progressbar {
    /* 保留原有动画属性 */
    transform: translateZ(0);
    will-change: width, background;
}

注：此方案优化效果弱于方案1，因为width动画仍会触发回流。

额外优化建议 #

• 移除不必要的CSS属性，减少渲染计算量；
• 保持viewport meta标签设置正确，避免移动端页面缩放带来的额外渲染压力。

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