使用 opacity 和 transform: translateY() 在同一 @keyframes 中同步控制，可实现淡入上滑动效；需加 forwards 保持终态，起始状态须与元素默认样式一致。
直接用 opacity 和 transform: translateY() 配合 @keyframes 就能实现淡入 + 上移的组合动效，关键在于两个属性要写在同一个 keyframes 规则里，且起始/结束状态同步控制。
基础写法：从透明、下移位置开始，到不透明、归位
常见需求是元素“从下方淡入并上滑到最终位置”，比如弹窗、提示条、卡片入场。CSS 示例：
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px); /* 初始：向下偏移 20px */
}
to {
opacity: 1;
transform: translateY(0); /* 结束：回到原位 */
}
}然后在元素上应用：
.box {
animation: fadeInUp 0.4s ease-out forwards;
}注意：forwards 很重要，它让动画停在 to 状态，否则元素会闪回初始样式。
立即学习“前端免费学习笔记（深入）”；
更自然的缓动与分段控制（可选进阶）
纯 ease-out 有时上移太快，可以微调关键帧节奏，比如加一个中间点让上移略“缓冲”：
@keyframes fadeInUpSmooth {
0% {
opacity: 0;
transform: translateY(30px);
}
60% {
opacity: 1;
transform: translateY(-5px); /* 稍微 overshoot，再回弹 */
}
100% {
opacity: 1;
transform: translateY(0);
}
}- 这样比线性过渡更有“轻盈感”，适合 UI 入场动效
- opacity 在 60% 就完成，避免后半段“悬停透明”感
- transform 的 overshoot（-5px）配合
cubic-bezier(.25,.95,.44,1.15)会更生动
实际使用小提醒
- 确保元素默认没有
opacity: 0或transform，否则动画可能不触发或错位 - 如果父容器有
overflow: hidden，注意 translateY 起始值别太大，防止被截断 - 移动端建议加
will-change: opacity, transform提升渲染性能（尤其频繁触发动效时） - 想兼容老浏览器？
transform本身兼容性很好，IE10+ 都支持；opacityIE9+ 也 OK
基本上就这些。组合动画不复杂，但容易忽略 forwards 和起始状态一致性——写对 keyframes 的 from/to，动效就稳了一大半。
