CSS成就解锁动画需用JS控制类名切换，初始设opacity:0/transform:scale(0.8)/visibility:hidden，解锁时添加unlocked类触发animation:unlock 0.6s forwards并设visibility:visible。
用 CSS 动画触发“成就解锁”视觉反馈
HTML 本身不支持动画逻辑，所谓“解锁动画”本质是 CSS 动画 + JS 控制类名切换。关键不是写多炫的动画，而是让动画只在真正“解锁”时播放一次，避免重复触发或错位。
常见错误现象：animation: unlock 0.6s 直接写死在元素上，导致页面加载就播、刷新又播、甚至 JS 多次添加类名后反复播；或者用 display: none 隐藏元素再显示，动画直接失效（CSS 动画不作用于 display: none 元素）。
- 正确做法：初始状态用
opacity: 0; transform: scale(0.8);配合visibility: hidden;占位，不阻断布局流 - 解锁时 JS 添加一个类（如
unlocked），该类里定义animation: unlock 0.6s forwards;和visibility: visible; - 动画结束后保持最终态（
forwards很关键），否则会闪回初始样式
JS 判断成就是否“已解锁”并精准触发
静态 HTML 没有状态记忆能力，所谓“已解锁”，必须靠外部数据源驱动——比如从 localStorage 读标记、或服务端返回的 JSON 数据里带 isUnlocked 字段。别指望纯 HTML 自己记住用户点过没。
使用场景：用户完成某任务后，前端存 localStorage.setItem('achv_login_7d', 'true')；页面加载时检查这个 key，决定是否给对应成就元素加 unlocked 类。
立即学习“前端免费学习笔记（深入）”；
- 别用
document.getElementById('achv-1').classList.add('unlocked')硬编码所有 ID——改成就就得改 JS - 推荐用 data 属性统一管理：
<div class="achievement" data-achv-id="login_7d">，JS 通过 <code>data-achv-id匹配 localStorage 的键 - 注意 localStorage 值是字符串，
=== 'true'才算解锁，== true会把'false'也转成 true - 动画只用
transform: scale() translate()+opacity，禁用left/top定位动画 - 加
will-change: transform, opacity;提前告诉浏览器要动啥（但别滥用，每个元素都加反而拖慢） - IE11 不支持
@keyframes中的transform缩写（如scale(1.2)），得写全transform: scale(1.2) translateX(0)
动画卡顿或不兼容老浏览器的现实处理
不是所有设备都扛得住 transform + opacity 同时动画，尤其低端安卓 WebView 或 iOS Safari 旧版本。别一上来就堆 box-shadow 渐变 + 多层 filter，那不是酷，是卡。
性能影响：动画属性中，transform 和 opacity 是唯二能走 GPU 加速的。其他如 height、margin、background-color 触发重排重绘，帧率直接掉。
静态页里“动态感”的边界在哪
纯 HTML + CSS + JS 静态页能做到的，仅限于“基于已有数据的状态响应”。它不能主动感知用户行为（比如监听鼠标悬停不算问题，但监听“用户刚完成支付”这种跨域事件就不行），也不能实时拉新数据。
容易被忽略的地方：如果成就依赖异步数据（比如从 CDN 加载 achievements.json），JS 必须等数据 fetch 完、解析完、再批量比对和添加类名。中间任何一步出错（404、JSON 格式错、字段名拼错），整个解锁区域就静默了——连报错都可能被 console 折叠掉。
最稳妥的做法：后端渲染时就把 unlocked 类直接写进 HTML（SSR），前端 JS 只负责补动画；静态页做不到 SSR，那就把成就数据硬编码进 JS 变量里，至少保证“有数据可判”，不依赖网络。
