@keyframes动画必须显式定义from/to或0%/100%关键帧，否则无效；animation简写需严格按顺序；优先用transform/opacity保证60fps；forwards失效常因外部样式覆盖。
用 @keyframes 定义动画时，必须指定 from 和 to 或百分比关键帧
浏览器不会自动补全起始/结束状态，漏写会导致动画无效果或只执行单帧。比如只写 @keyframes slide { 50% { transform: translateX(100px); } }，元素根本不会动——因为缺少起始和终止位置定义。
实操建议：
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
- 始终显式写出
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 操作把它覆盖掉。
