如何使用CSS Animation实现div从底部平滑出现效果？

你要的div从底部平滑弹出的效果，用CSS动画完全可以实现，以下是具体的修改步骤和完整代码：

核心思路 #

通过@keyframes定义动画的起始和结束状态，让元素从底部完全隐藏的位置，平滑过渡到设定的显示位置，同时配合透明度变化让效果更自然。

完整代码 #

CSS 部分

body {
  background: red;
}

.container {
  background: white;
  padding: 20px;
  position: absolute;
  bottom: 20px;
  left: 45%;
  border-radius: 10px;
  /* 初始状态：向下偏移自身高度（完全在底部外侧），透明不可见 */
  transform: translateY(100%);
  opacity: 0;
  /* 应用动画：动画名称、时长、缓动效果、结束后保持最终状态 */
  animation: slideUp 0.5s ease-out forwards;
}

/* 定义动画关键帧：指定动画结束时的状态 */
@keyframes slideUp {
  to {
    transform: translateY(0); /* 回到正常位置 */
    opacity: 1; /* 完全显示 */
  }
}

HTML 部分

<div class="container">
This is magic!
</div>

关键属性说明 #

• @keyframes slideUp：定义了动画的目标状态，元素会从初始的隐藏状态，过渡到这里指定的显示状态。
• animation 属性拆解：
  • slideUp：对应我们定义的动画名称
  • 0.5s：动画持续时长，可根据需求调整（比如改成1s就是1秒完成动画）
  • ease-out：缓动效果，动画开始时速度快，结束时逐渐减速，更贴近自然的弹出感
  • forwards：动画结束后保持最后一帧的状态，不会跳回初始的隐藏状态

如果需要延迟触发动画（比如页面加载1秒后再弹出），只需在.container的样式里添加一行：

animation-delay: 1s;

内容的提问来源于stack exchange，提问作者Arsene Wenger