页面CSS动画引发卡顿？为何该动画性能消耗过高？

你的动画之所以让页面卡顿，核心问题出在动画修改了right属性——这个属性会触发浏览器的**重排（Reflow）**操作，这是浏览器渲染流程里性能开销最大的步骤之一。

浏览器渲染页面时，重排意味着要重新计算元素的位置、大小，甚至整个页面的布局结构。你的动画是无限循环的，每一帧都要触发一次重排，持续的重排会让CPU/GPU负载居高不下，直接拖慢页面响应，导致卡顿。

虽然你同时动画了opacity，但这个属性只会触发重绘（Repaint），性能消耗比重排小很多，根本顶不住right带来的重排开销。

优化方案：用transform替代位置属性 #

要解决这个问题，应该使用transform来实现位移动画，因为transform属于合成层属性，由GPU加速，不会触发重排，只会触发开销极低的**合成（Composite）**操作。修改后的代码如下：

.btn-text:not(.btn-video).active:after {
    animation: btn-text-anima 1s linear infinite;
    /* 可选：提前告诉浏览器元素要动，进一步优化性能 */
    will-change: transform, opacity;
}

@keyframes btn-text-anima {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }

    60% {
        transform: translateX(-40px);
        opacity: 1;
    }

    100% {
        transform: translateX(-45px);
        opacity: 0;
    }
}

用transform: translateX()替代right后，浏览器会把这个元素放到单独的GPU图层处理，动画过程中不需要重新计算布局，只需要合成新的帧，性能会大幅提升，卡顿问题也会随之消失。

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