html本身不提供特效功能，所有动效须由css（transition/animations）或javascript（requestanimationframe等）实现；需避免display:none过渡、滥用will-change、误用marquee，并用devtools定位渲染问题。
HTML 页面本身不提供“特效设置”这个功能，所有视觉动效都得靠 CSS 或 JavaScript 实现；直接写 标签或改 DOCTYPE 对动画、过渡、滚动效果完全没用。
怎么用 CSS 实现常见页面动效
CSS 是控制 HTML 元素外观和基础动效的主力，transition 和 animation 两个属性最常用，但行为差异大：
-
transition适合简单状态切换，比如按钮悬停变色、菜单展开——必须配合:hover、class切换等触发条件，不能独立运行 -
animation需要先用@keyframes定义帧序列，适合循环播放、复杂路径（如弹跳、路径移动），但默认不响应交互，得靠 JS 控制播放/暂停 - 别在
display: none的元素上设transition，它不会生效；改用opacity: 0+visibility: hidden组合才可过渡 - 移动端要注意
transform和opacity才能触发硬件加速，写left/top位移会掉帧
button {
background: #007bff;
transition: background 0.3s, transform 0.2s;
}
button:hover {
background: #0056b3;
transform: scale(1.05);
}
JavaScript 控制动效时容易卡死的几个点
JS 不是“加个 animate() 就动起来”，关键在时机控制和性能隔离：
- 别用
setTimeout或setInterval做逐帧动画，优先用requestAnimationFrame，它和屏幕刷新率同步，不丢帧 - 频繁读取
offsetTop、getBoundingClientRect()会强制触发重排（reflow），把读操作集中到一帧开头，写操作集中到结尾 - 用
IntersectionObserver替代滚动监听做懒加载或视差效果，避免scroll事件高频触发导致卡顿 - 给元素加
will-change: transform能提前提示浏览器“这个要动”，但滥用会导致内存占用飙升，只在真正需要前一帧加
哪些“HTML 特效”其实是浏览器或编辑器的错觉
很多人以为某些效果是 HTML 自带的，实际是外部因素干扰：
立即学习“前端免费学习笔记（深入）”；
- 复制粘贴后文字带颜色/缩进？那是源内容含内联
style或富文本残留，文件本身没保存格式 - 本地双击打开页面有淡入？大概率是浏览器（如 Chrome）对本地文件的渲染策略或扩展注入了样式，换 Edge 或禁用插件就消失
- VS Code 里预览有动画？那是插件（如 “Live Server”）启用了自动刷新 + 默认注入了 CSS 动画库，不是 HTML 标准行为
-
<marquee></marquee>标签虽能滚动文字，但已废弃多年，无标准支持、无事件控制、移动端基本失效，别用
真要做出稳定可控的页面动效，得盯住三件事：CSS 层叠是否被意外覆盖、JS 动画帧是否被阻塞、目标元素是否处于可渲染状态。浏览器 DevTools 的 Rendering 面板（勾选 Paint flashing 和 FPS meter）比任何教程都更能暴露问题在哪。
