css网页效果实现_添加动画效果提升用户体验_技术教程

@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 myAn

im;，结果动画不播放——因为时长 0.3s 被当成了 animation-name，而真正的动画名 myAnim 被当成时长解析失败。

实操建议：

优先使用完整写法，尤其调试阶段：

animation-name: myAnim;
animation-duration: 0.3s;
animation-timing-function: ease-in;
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 控制