答案是使用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 保持最终状态。不复杂但容易忽略细节。
