HTML本身不支持动态效果，需依赖CSS动画或JavaScript；CSS的@keyframes配合animation属性可实现轻量级自动播放动画，而requestAnimationFrame适合高精度JS动画，canvas则需手动清空画布。
HTML 本身不支持动态效果，所谓“HTML在线运行里写动态效果”，实际是靠 CSS 动画或 JavaScript 控制 DOM 实现的。纯 HTML 标签（比如 <div>、<p>）只能定义结构，动不了。
CSS 的 @keyframes 和 animation 最快上手
这是最轻量、无需 JS 就能实现位移/缩放/旋转/透明度变化的方式，适合加载动画、按钮悬停反馈、轮播指示器等。
- 必须配合一个有样式的 HTML 元素（比如
<div class="bounce">） -
@keyframes定义帧序列，animation属性绑定到元素上 - 不要直接用
transition模拟循环动画——它只响应状态变化，不是自动播放
@keyframes slideIn {
from { transform: translateX(-100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.bounce {
animation: slideIn 0.6s ease-out forwards;
}-
forwards很关键：否则动画结束后元素会跳回初始状态 - 在线运行环境（如 CodePen、JSFiddle、或浏览器开发者工具的 Elements 面板）中粘贴这段 CSS + 对应 HTML 即可看到效果
- 注意：不要在
style标签里漏掉@keyframes声明，否则animation找不到目标
requestAnimationFrame 比 setTimeout 更适合动画循环
如果你需要精确控制帧率（比如 Canvas 绘图、物理模拟、滚动视差），requestAnimationFrame 是浏览器原生推荐方式，比 setTimeout(..., 16) 更稳、更省电、自动节流。
- 它不是“每 16ms 调用一次”，而是由浏览器决定何时执行，与屏幕刷新率对齐
- 必须手动递归调用，否则只执行一帧
function animate() {
// 更新位置、旋转角度等
element.style.transform = `rotate(${angle}deg)`;
angle += 2;
<p>requestAnimationFrame(animate); // 下一帧继续
}
animate();- 如果没加
requestAnimationFrame(animate)这行，动画就停了 - 别在循环里反复
document.querySelector查元素——查一次存变量 - 在线运行时若报错
Cannot read property 'style' of null，大概率是 DOM 还没加载完就执行了 JS，加个DOMContentLoaded包裹
canvas 动画必须手动清空画布再重绘
很多初学者以为 <canvas> 是“图层”，其实它是位图缓冲区：上一帧内容不会自动消失，不清理就会残留、拖影、糊成一片。
立即学习“前端免费学习笔记（深入）”；
- 每次
requestAnimationFrame中，第一件事应该是ctx.clearRect(0, 0, canvas.width, canvas.height) -
canvas.width和canvas.height是绘图区域尺寸，不是 CSS 设置的宽高——二者不一致会导致拉伸模糊 - 在线运行平台（如 JSBin）默认可能不设
width/height属性，记得显式写死：<canvas width="400" height="300"></canvas>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 关键！
ctx.fillStyle = 'red';
ctx.fillRect(x, y, 50, 30);
x += 2;
requestAnimationFrame(draw);
}
draw();真正容易被忽略的是：所有动画都依赖时间基准，但在线运行环境不保证 JS 执行时机绝对稳定。
比如嵌入 iframe 的沙盒环境、移动端后台标签页、或低性能设备，requestAnimationFrame 可能被降频甚至暂停。这时候靠 CSS 动画反而更可靠——它由渲染引擎直接驱动，不经过 JS 主线程。
