页面加载时CSS文本动画抖动严重，该如何解决？

核心问题分析 #

你的动画卡顿主要来自两个关键问题：

• 动画同时修改top/left（布局属性，触发重排）和transform（合成层属性），浏览器需要频繁计算布局，导致性能损耗。
• 冗余的CSS属性和无效设置增加了浏览器渲染负担。

优化方案（纯CSS，无需JS） #

1. 移除布局属性的动画修改：把top/left的位移逻辑整合到transform: translate()里，只通过transform和opacity实现动画——这两个属性会触发浏览器的合成层优化，避免重排。
2. 清理冗余属性：删除重复的width设置、无效的perspective(0px)，统一CSS前缀（现代浏览器支持标准属性，无需仅保留-webkit-）。
3. 添加性能提示：用will-change告诉浏览器提前为动画元素分配资源，进一步提升流畅度。

修改后的完整代码 #

CSS部分

/* ////////////////// TOP NAV BAR GRID //////////////// */
.grid-container-topnav {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 290px;
    display: inline-grid;
    gap: 0px;
    padding: 0px;
    grid-template-columns: repeat(4, 69px) 14px;
    grid-template-rows: 32px;
}

.grid-item-topnav {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 16px;
    font-family: Candara Light, Cascadia Code, Courier New, monospace;
    border: solid 1px #272727;
    color: #e4e4e4;
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity; /* 提前告知浏览器准备动画 */
}

.topnav-item1 { grid-column: 1; grid-row: 1; }
.topnav-item2 { grid-column: 2; grid-row: 1; }
.topnav-item3 { grid-column: 3; grid-row: 1; }
.topnav-item4 { grid-column: 4; grid-row: 1; }

.topnav-item1,
.topnav-item2,
.topnav-item3,
.topnav-item4{
    background: linear-gradient(0deg, #303030, transparent) #505050;
    transition: 0.2s ease-in-out;
}

.topnav-item1:hover,
.topnav-item2:hover,
.topnav-item3:hover,
.topnav-item4:hover{
    box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #6461ff;
    transition: 0.25s ease-out;
    border: solid 1px #6461ff;
    background-color: #6968a7;
}

.topnav-item1:active,
.topnav-item2:active,
.topnav-item3:active,
.topnav-item4:active{
    box-shadow: inset 1px 1px 5px #00000013, 1px 1px 8px #e9666699;
    transition: 0.25s ease-out;
    border: solid 1px #e63f3f;
    background-color: #6e6e6e;
}

.topnav-item5 {
    grid-column: 5;
    grid-row: 1;
    font-family: Arial;
    transition: 0.2s ease-in-out;
    color: #cccccc;
    background-color: #9b1e1e;
}

.topnav-item5:hover {
    box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #c71e1e;
    border: solid 1px #c71e1e;
    color: #ffffff00;
    background-color: #9b1e1e;
}

.active_tab {
    outline: 0;
    transition: 0.25s ease-out;
    background-color: #6968a7;
}

/* /////// - ONLOAD ANIMATION > CHILD SUBGRID ITEMS - /////// */
.j05 { animation: scale-in-item 2s 0s ease-in-out forwards; }
.j04 { animation: scale-in-item 2s 0.1s ease-in-out forwards; }
.j03 { animation: scale-in-item 2s 0.2s ease-in-out forwards; }
.j02 { animation: scale-in-item 2s 0.3s ease-in-out forwards; }
.j01 { animation: scale-in-item 2s 0.4s ease-in-out forwards; }

@keyframes scale-in-item {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 1) translate(25px, -20px); /* 把位移整合到transform */
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate(0, 0);
  }
}

HTML部分

<div class="grid-container-topnav">
    <button class="grid-item-topnav topnav-item1 j01" id="myItem1" tabindex="-1">Banana</button>
    <button class="grid-item-topnav topnav-item2 j02" id="myItem2" tabindex="-1">Apples</button>
    <button class="grid-item-topnav topnav-item3 j03" id="myItem3" tabindex="-1">Oranges</button>
    <button class="grid-item-topnav topnav-item4 j04" id="myItem4" tabindex="-1">Kiwis</button>
    <button class="grid-item-topnav topnav-item5 j05" id="myItemX" tabindex="-1"></button>
</div>

额外说明 #

• 动画只使用transform和opacity，这两个属性是浏览器性能优化的核心目标，不会触发重排/重绘，仅触发合成层更新，流畅度大幅提升。
• 移除了perspective(0px)，因为你的动画不需要3D透视效果，多余的3D属性会增加GPU负担。
• will-change属性让浏览器提前为元素分配动画资源，避免动画启动时的卡顿。

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