在css中如何用animation制作弹出提示框动画

答案是使用CSS的@keyframes定义动画，通过opacity和transform实现提示框的弹出与消失。首先设置.toast基础样式并隐藏，利用@keyframes toast-in定义从上方弹入的动画，结合JavaScript添加show类触发显示，3秒后移除类实现自动关闭；可选toast-out动画实现平滑退出，注意visibility与animation-fill-mode:forwards配合保持状态，确保动画流畅自然。

要使用 CSS 的 animation 制作弹出提示框动画，关键是定义关键帧（@keyframes）来控制元素从隐藏到显示的过渡过程，通常包括透明度变化和位移效果。下面是一个简单实用的实现方式。

1. 基本结构：HTML 结构

提示框通常包含一个容器，比如一个带有类名 toast 的 div：

操作成功！

2. 样式与动画定义：CSS 实现

先设置提示框的基本样式，并通过 @keyframes 定义弹出动画：

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

@keyframes toast-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -100%);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.toast.show {
  animation: toast-in 0.5s ease-out forwards;
}

3. 触发动画：JavaScript 控制显隐

使用 JavaScript 添加或移除 show 类来触发动画：

// 获取元素
const toast = document.querySelector('.toast');

// 显示提示框
function showToast() {
  toast.classList.add('show');
  
  // 3秒后自动消失
  setTimeout(() => {
    toast.classList.remove('show');
  }, 3000);
}

// 调用函数测试
showToast();
  

4. 可选增强：退出动画

如果需要平滑消失，可以再定义一个退出动画：

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
}
  

然后在移除 show 类前，先添加退出类，延迟移除元素。

基本上就这些。通过结合 opacity、transform 和 @keyframes，你可以轻松做出流畅自然的弹出提示框动画，无需依赖 JavaScript 动画库。关键是控制好 visibility 和 forwards 保持最终状态。不复杂但容易忽略细节。