答案是使用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 保持最终状态。不复杂但容易忽略细节。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
以上就是在css中如何用animation制作弹出提示框动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1004113.html
微信扫一扫 
支付宝扫一扫 
