翻页这个动作几乎出现在所有涉及列表展示的页面上，无论是后台管理系统的数据表格，还是电商网站的商品列表，用户每天要点击几十上百次分页按钮。如果每次切换都是内容瞬间替换，整个交互会显得非常生硬。合理的CSS动画能让翻页过程有明确的方向感和反馈，同时几乎不增加性能负担。本文从过渡、关键帧动画、性能优化到无障碍适配，系统地聊聊分页组件切换中的动画实现技巧。
用transition给页码按钮加平滑高亮
分页组件最基础的动画需求是页码按钮的激活状态切换。默认情况下，当前页的样式是瞬间变化的，加入transition之后，背景色、文字颜色、边框等属性的变化会按指定时长平滑过渡。这种微小的细节改动成本极低，却能明显提升组件的精致感。
实现时只需要在按钮的基础样式上声明要过渡的属性和时长，浏览器会在状态变化时自动补间：
.page-btn {
min-width: 32px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
background: #fff;
color: #606266;
/* 对颜色和边框做过渡，时长控制在0.2秒左右 */
transition: background-color 0.2s ease, color 0.2s ease,
border-color 0.2s ease, transform 0.15s ease;
}
.page-btn:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.page-btn.active {
background-color: #409eff;
border-color: #409eff;
color: #fff;
/* 激活时轻微放大，强化选中反馈 */
transform: scale(1.08);
}需要注意的是，过渡时长不宜设置得过长。翻页属于高频操作，用户期望的是即时的视觉确认，0.15秒到0.25秒是比较合适的区间。如果超过0.4秒，用户连续点击时会觉得组件响应迟钝。另外transform: scale()这类效果要配合transform-origin: center使用，避免按钮缩放时出现位移。
列表内容的切换动画：淡入与滑动
页码高亮只是表象，真正的切换动画发生在列表内容区域。常见做法是在数据更新时给容器加一个入场动画类，利用@keyframes定义淡入或滑动效果，动画结束后移除类名，等下次翻页再触发。这种方式不依赖任何JS动画库，纯CSS就能完成。
@keyframes fade-slide-in {
from {
opacity: 0;
transform: translateX(24px);
}
to {
opacity: 0;
/* 注意这里应是 1，演示时请写 opacity: 1 */
}
}
/* 正确完整的写法 */
@keyframes page-enter {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.list-container.entering {
animation: page-enter 0.3s cubic-bezier(0.25, 0.8, 0.35, 1);
}配合JavaScript，在每次请求到新数据后重新触发动画即可。触发技巧是先移除类名，强制浏览器回流一次，再添加类名：
function switchPage(newPage) {
const container = document.querySelector('.list-container');
container.classList.remove('entering');
// 强制回流，确保动画能重新触发
void container.offsetWidth;
loadData(newPage).then(() => {
container.classList.add('entering');
});
}动画方向可以和翻页方向绑定：点下一页时内容从右侧滑入，点上一页时从左侧滑入，这样用户能通过视觉感知到浏览的方向。做法是准备两个方向的关键帧，JS根据页码差值决定挂载哪一类。还可以用animation-fill-mode: backwards避免动画开始前内容闪现。
性能优化：为什么优先选择transform和opacity
动画属性的选择直接决定流畅度。浏览器渲染中有布局、绘制、合成三个阶段，修改width、top这类几何属性会触发重排，代价很高；而transform和opacity只影响合成层，可以交给GPU处理，即使在低端设备上也能稳定在60帧。
所以给列表做切换动画时，要避免用margin-left或left做位移，统一改用transform: translateX()。如果确实需要动画化高度变化，比如翻页时表格行数减少导致容器高度收缩，推荐使用grid-template-rows: 0fr到1fr的过渡方案，或者借助CSS的interpolate-size配合calc-size()（在支持的浏览器中），都比直接监听scrollHeight写JS要简洁得多。
另一个优化点是控制动画作用范围。分页切换时，没有必要给每一行都加独立动画，对整个容器加一个入场动画就够了。给几十个DOM节点同时应用复杂动画，反而会让浏览器在合成阶段吃力。
无障碍适配与动画细节打磨
动画虽好，但不是所有用户都喜欢。部分前庭功能敏感的用户会因为持续的运动效果感到眩晕，因此建议配合prefers-reduced-motion媒体查询，在系统开启减弱动态效果时退化为简单的透明度变化甚至直接关闭动画：
@media (prefers-reduced-motion: reduce) {
.list-container.entering {
animation: none;
}
.page-btn {
transition: none;
}
}最后是几个容易忽略的细节。第一，翻页动画的时长应该比入场动画更短，列表内容建议控制在0.3秒内完成；第二，加载等待和切换动画要衔接好，如果接口响应慢，可以先显示骨架屏，数据回来后再播放进入动画，避免动画放完了数据还没到；第三，缓动函数推荐使用ease-out类曲线，内容快速出现后缓缓停下，符合用户注意力的捕捉规律，而ease-in会让开头显得卡顿。把这些细节处理好，分页组件的体验就能在细节上胜出一截。