HTML5页面平滑过渡动画有五种常用方式：一、CSS3 transition实现淡入淡出；二、transform模拟滑动切换；三、@keyframes构建翻页效果；四、Web Animations API精细控制；五、History API同步URL与动画。
如果您希望在HTML5页面中实现平滑的页面过渡动画，可以通过CSS3动画与JavaScript事件协同控制元素的显示与隐藏状态。以下是几种常用的实现方式：
一、使用CSS3 transition实现淡入淡出效果
该方法通过为容器元素设置opacity和visibility属性的过渡效果，在页面内容切换时触发样式变化，从而实现视觉上的淡入淡出动画。
1、在CSS中定义一个过渡类，例如.fade-transition，设置opacity从0到1、visibility从hidden到visible，并指定transition属性。
2、将需要切换的内容包裹在具有固定定位或绝对定位的容器内，确保其层叠上下文稳定。
立即学习“前端免费学习笔记（深入）”；
3、在JavaScript中，当新内容加载完成时，先将新容器opacity设为0、visibility设为hidden，再强制重排（如读取offsetHeight），最后添加过渡类并设置opacity为1。
4、旧内容可在新内容完全显示后，通过监听transitionend事件移除其DOM节点或隐藏。
二、利用CSS3 transform模拟页面滑动切换
该方法借助transform: translateX()或translateY()对两个页面容器进行位移控制，配合transition实现左右或上下滑动效果，适用于单页应用中的视图切换。
1、准备两个全屏section元素，分别代表当前页和目标页，初始时均位于文档流中且position为absolute。
2、设置当前页transform为translateX(0)，目标页为translateX(100%)，并统一启用transition: transform 0.4s ease-in-out。
3、触发切换时，将当前页设为translateX(-100%)，目标页设为translateX(0)。
4、动画结束后，通过JavaScript调整DOM顺序或z-index，确保目标页处于可视层最上方。
三、基于CSS自定义动画（@keyframes）构建翻页效果
该方法使用@keyframes定义关键帧序列，模拟书籍翻页、卡片翻转等复杂过渡形态，适合需要强表现力的场景。
1、在CSS中声明一个名为page-flip的@keyframes规则，包含from状态（初始旋转角度为0deg）和to状态（绕Y轴旋转180deg并伴随scale缩放）。
2、为目标容器设置animation: page-flip 0.6s forwards，同时添加perspective和transform-style: preserve-3d以启用3D渲染上下文。
3、在JavaScript中，于页面切换前动态添加该动画类到即将退出的容器，并在animationend事件中移除旧内容、插入新内容并重置动画类。
4、为避免动画重复触发，需在每次切换前检查元素是否已存在动画类，并清除transition和animation内联样式。
四、使用Web Animations API直接控制动画流程
该方法绕过CSS类操作，通过JavaScript调用Element.animate()方法创建可编程的动画实例，支持暂停、回放、时间偏移等精细控制。
1、获取当前页面容器和目标页面容器的DOM引用。
2、调用currentEl.animate()传入关键帧数组[{opacity: 1, transform: 'translateX(0)'}, {opacity: 0, transform: 'translateX(-20px)'}]及配置对象{duration: 300, easing: 'ease-out'}。
3、对targetEl执行对应反向动画：[{opacity: 0, transform: 'translateX(20px)'}, {opacity: 1, transform: 'translateX(0)'}]。
4、监听两个动画的onfinish回调，在全部完成后更新页面状态，并将targetEl设为可见主体，currentEl设为隐藏或销毁。
五、结合History API实现无刷新URL变更与动画同步
该方法在不重新加载整个页面的前提下，利用pushState/replaceState修改地址栏，并在popstate事件中响应浏览器前进后退操作，同时驱动CSS或JS动画。
1、在页面初始化时，为window绑定popstate事件监听器，用于捕获用户导航行为。
2、每次页面切换前，调用history.pushState({page: 'new'}, '', '/new-path')更新URL，同时记录当前页面标识。
3、在popstate事件处理函数中，根据event.state.page判断目标页面，启动对应的CSS过渡类或Web Animations动画。
4、动画开始前，预加载目标页面HTML片段或JSON数据；动画结束后，将内容注入主容器并更新document.title。
