HTML5实现动画有三种常用方法：一、CSS3 transition实现属性过渡动画；二、CSS3 animation配合@keyframes定义关键帧动画；三、JavaScript中使用requestAnimationFrame进行高效动画控制。
如果您希望在网页中实现动态视觉效果，HTML5 提供了多种原生支持动画的技术路径。以下是 HTML5 中实现动画的常用方法：
一、使用 CSS3 transition 实现属性过渡动画
CSS3 transition 允许在元素样式发生变化时，以平滑过渡的方式完成状态切换，适用于 hover、class 切换等触发场景。
1、在 HTML 中定义一个需要动画的元素，例如：<div class="box"></div>。
2、在 CSS 中设置基础样式与过渡规则：.box { width: 100px; height: 100px; background: blue; transition: width 0.3s ease, background-color 0.3s linear; }。
立即学习“前端免费学习笔记（深入）”；
3、添加伪类或 JavaScript 触发样式变化：.box:hover { width: 200px; background-color: <strong><font color="green">red</font></strong>; }。
二、使用 CSS3 animation 配合 @keyframes 定义关键帧动画
CSS3 animation 可定义更复杂的多阶段运动序列，通过 @keyframes 声明动画行为，再绑定到具体选择器上。
1、在 CSS 中使用 @keyframes 定义动画名称和关键帧，例如：@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }。
2、将动画应用到目标元素：.animated-box { animation-name: slideIn; animation-duration: <strong><font color="green">0.6s</font></strong>; animation-timing-function: ease-out; }。
3、可选地添加 animation-fill-mode: forwards; 使动画结束后保持最终状态。
三、使用 requestAnimationFrame 进行 JavaScript 动画控制
requestAnimationFrame 是浏览器专为动画设计的 API，比 setInterval 更高效、更节电，且与屏幕刷新率同步。
1、定义一个动画函数，例如：function animate() { element.style.transform = 'translateX(' + x + 'px)'; x += 2; if (x 。
2、确保在首次调用前初始化变量 x = 0 并获取目标元素引用。
3、启动动画：requestAnimationFrame(animate);，浏览器会自动调度下一帧，无需手动控制帧率。
四、使用 SVG 内置动画元素 animate、set、animateTransform
SVG 原生支持 SMIL 动画语法，可在 XML 层级直接声明动画行为，适合图标、图表等矢量图形的动态呈现。
1、在 SVG 中嵌入 <animate> 元素，例如：<rect width="100" height="50"><animate attributeName="width" from="100" to="200" dur="2s" repeatCount="indefinite" /></rect>。
2、使用 animateTransform 控制旋转或缩放：<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3s" repeatCount="indefinite" />。
3、注意：部分新版本浏览器已逐步弃用 SMIL，建议搭配 Web Animations API 或 CSS 方案作为后备。
五、使用 Web Animations API（WAAPI）进行脚本化精细控制
Web Animations API 是现代浏览器提供的统一动画接口，融合了 CSS 动画能力与 JS 控制力，支持播放、暂停、反转、时间轴操作等。
1、对 DOM 元素调用 animate() 方法：element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 1000, easing: 'ease-in-out' });。
2、保存动画实例以便后续控制：const anim = element.animate([...]); anim.pause(); anim.reverse();。
3、监听动画生命周期事件：anim.onfinish = () => console.log('<strong><font color="green">动画已完成</font></strong>'); 。
