17370845950

使用 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+ 都支持；opacity IE9+ 也 OK

基本上就这些。组合动画不复杂，但容易忽略 forwards 和起始状态一致性——写对 keyframes 的 from/to，动效就稳了一大半。