CSS动画实现“从天而降的弹跳”提示通知：通过transform: translateY()控制位移，结合cubic-bezier(0.22, 0.61, 0.36, 1)和keyframes模拟下落、触底超调、回弹、静止全过程，配合类名切换控制显隐，无需JS驱动动画逻辑。
用 CSS 动画实现“从天而降的弹跳”提示通知，核心是结合 transform: translateY() 控制垂直位移，再叠加 animation-timing-function 中的 bounce（或自定义贝塞尔曲线）模拟真实弹跳感。不需要 JavaScript 也能完成，但建议配合类名切换控制显示/隐藏时机。
1. 基础结构与初始隐藏
通知容器默认设为不可见，定位在视口上方，避免影响布局：
- 使用
position: fixed或absolute脱离文档流 -
top: -100px（或负的自身高度）让通知初始位于屏幕外顶部 -
opacity: 0和pointer-events: none确保初始不可见、不可交互
2. 关键帧动画：下落 + 弹跳
定义 @keyframes 实现“下落→触底→小幅回弹→静止”的过程。例如：
@keyframes dropAndBounce {
0% {
transform: translateY(-100px) scale(0.8);
opacity: 0;
}
60% {
transform: translateY(20px) scale(1.05); /* 超过目标位置，制造弹起错觉 */
opacity: 1;
}
80% {
transform: translateY(-5px) scale(0.98); /* 回弹一次 */
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}⚠️ 注意：20px 和 -5px 的数值需根据通知实际高度微调；scale 变化增强物理反馈感。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
3. 触发动画：添加类名而非内联样式
通过 JS 在需要时给通知元素添加一个如 show 的类，CSS 响应这个类来播放动画：
- CSS 中写：
.notification.show { animation: dropAndBounce 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } - 推荐用
cubic-bezier(0.22, 0.61, 0.36, 1)替代ease-out，更接近自然减速+轻微回弹 - 动画结束后保持最终状态：加
animation-fill-mode: forwards
4. 收回动画（可选）
点击关闭时，可反向播放淡出+上浮动画：
- 定义
@keyframes fadeUp：从opacity:1; transform: translateY(0)→opacity:0; transform: translateY(-50px) - 添加
.notification.hide类触发该动画，并在动画结束时移除元素或设display:none
整个效果不依赖 JS 动画逻辑，性能好、易维护。关键是把“弹跳”理解为位置 overshoot + 回弹，而不是单纯上下抖动。
