在css中如何用animation制作弹出提示框动画-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-19 15:40:01

原创

243人浏览过

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

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

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

1. 基本结构：HTML 结构

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

<div class="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 保持最终状态。不复杂但容易忽略细节。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

以上就是在css中如何用animation制作弹出提示框动画的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何控制不同模块使用独立css样式_css作用域划分策略在html中如何内嵌css代码_css内嵌样式语法示例如何选择CSS颜色表示方式_不同格式的优缺点对比如何用css框架Bootstrap制作轮播图如何用css实现输入框动画效果