@keyframes动画必须显式定义from/to或0%/100%关键帧，否则无效；animation简写需严格按顺序；优先用transform/opacity保证60fps；forwards失效常因外部样式覆盖。
用 @keyframes 定义动画时，必须指定 from 和 to 或百分比关键帧
浏览器不会自动补全起始/结束状态，漏写会导致动画无效果或只执行单帧。比如只写 @keyframes slide { 50% { transform: translateX(100px); } }，元素根本不会动——因为缺少起始和终止位置定义。
实操建议：
- 始终显式写出
from（等价于0%）和to（等价于100%），哪怕它们和默认样式一致 - 多个中间状态用百分比更可控，比如
0%, 30%, 70%, 100%，避免依赖浏览器推断 - 动画中修改的 CSS 属性必须是可动画的（如
opacity、transform、color），height或display这类会触发布局重排的属性慎用
animation 简写属性里顺序错乱会导致部分值被忽略
animation 是简写，但浏览器按固定顺序解析：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。一旦顺序不对，后续值可能被丢弃。
常见错误现象：写了 animation: 0.3s ease-in myAnim;，结果动画不播放——因为时长 0.3s 被当成了 animation-name，而真正的动画名 myAnim 被当成时长解析失败。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先使用完整写法，尤其调试阶段：
animation-name: myAnim;<br>animation-duration: 0.3s;<br>animation-timing-function: ease-in;<br>animation-fill-mode: forwards;
- 若用简写，确保第一个值是动画名（字符串），第二个是时长（带单位），第三个是缓动函数（如
ease），依此类推 - 注意
animation-delay和animation-duration单位相同（都是时间），但位置不可互换
用 transform + opacity 做动画才能保证 60fps
直接动画 left、top、width、background-color 等属性会频繁触发重排（reflow）或重绘（repaint），卡顿明显。只有 transform 和 opacity 被现代浏览器优化到合成层（compositor layer），GPU 加速，性能最稳。
使用场景：
- 位移 → 用
transform: translateX(20px)，别用left: 20px - 缩放 → 用
transform: scale(1.2)，别改width/height - 旋转 → 用
transform: rotate(45deg)，别靠border-radius模拟 - 淡入淡出 → 只动
opacity，别用visibility或display切换
性能影响：在低端安卓机或 Safari 上，非 transform/opacity 动画容易掉帧，用户滑动页面时动画会“抖”或直接暂停。
animation-fill-mode: forwards 不生效？检查是否被 display: none 覆盖
设了 forwards 想让动画最后一帧保留，但元素瞬间消失或样式回退——大概率是动画结束后，其他 CSS 规则（比如媒体查询、JS 添加的 class、父级 display: none）强行覆盖了最终状态。
容易踩的坑：
-
forwards只保持动画内声明的属性值，不能对抗外部显式设置（例如动画结束时opacity: 0，但后面又有一条规则写了opacity: 1，那还是显示为 1） - JS 控制显隐时，如果用
el.style.display = 'none'，会直接清空所有内联样式，包括transform和opacity的最终值 - Flex/Grid 容器中子项设
display: none后再显示，会丢失forwards状态，需配合visibility: hidden+opacity控制
真正要保留终态，得确保没有更高优先级的 CSS 规则或 JS 操作把它覆盖掉。
