如何修复导致Google Page Speed高CLS的动画并设置为横向？

核心修复要点 #

• 替换top属性动画为transform，避免触发浏览器布局重排，消除CLS
• 通过flex布局让文本项横向排列，配合translateX实现横向滚动动画
• 清理干扰布局的全局样式，固定容器尺寸防止布局偏移

修改后的完整代码 #

CSS #

.contBachecaHiGift {
    width: 100%;
    font-size: 14px;
    height: 36px;
    color: #c03022;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden; /* 隐藏超出容器的内容 */
}

.contBachecaHiGift .dynamic-text {
    list-style: none;
    position: absolute;
    display: flex; /* 横向排列列表项 */
    gap: 2rem; /* 项之间的间距 */
    height: 36px;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    font-weight: 700;
    white-space: nowrap; /* 防止文本换行 */
    animation: horizontalScroll 15s linear infinite; /* 横向滚动动画 */
}

.contBachecaHiGift .dynamic-text .item {
    display: flex;
    align-items: center;
    height: 100%;
}

/* 横向滚动动画 */
@keyframes horizontalScroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* 移除全局li的margin，避免布局干扰 */
ul > li, ol > li {
    margin-top: 0;
    margin-bottom: 0;
}

HTML #

<div class="text-container contBachecaHiGift">
  <ul class="dynamic-text">
    <!-- TESTO PER LE PROMO -->
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</li>
    <li class="item">incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li>
    <li class="item">nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
  </ul>
</div>

关键说明 #

1. CLS修复：所有动画依赖transform属性，仅触发GPU合成层更新，不会改变页面布局，彻底消除布局偏移导致的CLS。
2. 横向滚动实现：
   • .dynamic-text启用flex布局让列表项横向排列
   • white-space: nowrap保证文本不换行，维持横向布局
   • 动画通过translateX实现从右向左滚动，偏移量基于容器和列表的宽度比例
3. 容器优化：外层容器添加overflow: hidden隐藏超出内容，固定高度避免内容变化引发布局跳动。

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