notifications-toasts by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill notifications-toasts将迪士尼的 12 条动画原则应用于通知,以实现引人注目又不具破坏性的提醒。
提示框在进入时受到"冲击"可轻微压缩,然后拉伸恢复。营造一种从屏幕外"着陆"的感觉。
在自动消失之前,提示框可以轻微收缩(缩放至 95%)持续 100 毫秒。向用户发出即将消失的信号。
通知应出现在一致的位置。使用颜色和图标来区分重要性等级:信息、成功、警告、错误。
定义状态:进入中、可见、退出中、堆叠。为进入、吸引注意(如果需要)和退出设置清晰的关键帧。
图标在容器到达后开始动画(对勾绘制、铃铛摆动)。自动消失的进度条跟随提示框的进入而启动。
进入:ease-out(快速进入,缓慢停止)。退出:ease-in(缓慢开始,快速退出)。cubic-bezier(0.68, -0.55, 0.27, 1.55) 用于弹跳效果。
从角落滑入的提示框可以遵循轻微的弧线。铃铛图标应沿弧线摆动,而不是僵硬地旋转。
当提示框滑入时(主要动作),阴影出现(次要动作),图标开始动画(第三动作),进度条开始(第四动作)。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
错误通知可以抖动或红色脉冲。关键警报可以使用更大、更醒目的动画。动画的紧急程度应与重要性相匹配。
保持提示框尺寸一致。图标应清晰。进度条应平滑(使用变换,而非宽度)。
流畅的通知感觉精致。突兀的弹窗会惹恼用户。动画良好的提示框传达出专业性。
.toast {
animation: toastEnter 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.toast.exiting {
animation: toastExit 200ms ease-in forwards;
}
@keyframes toastEnter {
from {
opacity: 0;
transform: translateY(-100%) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes toastExit {
to {
opacity: 0;
transform: translateX(100%);
}
}
.toast-progress {
transform-origin: left;
animation: progress 4000ms linear forwards;
}
transform: 平移,缩放opacity: 淡入淡出animation: 进入/退出序列transform-origin: 进度条box-shadow: 深度每周安装量
76
代码仓库
GitHub 星标
22
首次出现
2026 年 1 月 24 日
安全审计
安装于
opencode65
codex65
gemini-cli61
github-copilot58
cursor57
amp51
Apply Disney's 12 principles to notifications for attention-grabbing yet non-disruptive alerts.
Toast can compress slightly on entrance impact, then stretch back. Creates a "landing" feel as if it arrived from off-screen.
Before auto-dismiss, toast can contract slightly (95% scale) for 100ms. Signals imminent departure to user.
Notifications should appear in consistent locations. Use color and icons to stage importance: info, success, warning, error.
Define states: entering, visible, exiting, stacked. Clear keyframes for entrance, attention (if needed), and exit.
Icon animates after container arrives (checkmark draws, bell wobbles). Progress bar for auto-dismiss follows toast entrance.
Enter: ease-out (fast in, slow settle). Exit: ease-in (slow start, fast out). cubic-bezier(0.68, -0.55, 0.27, 1.55) for bounce.
Toasts sliding from corners can follow slight arc. Bell icons should swing in arc, not rotate rigidly.
While toast slides in (primary), shadow appears (secondary), icon animates (tertiary), progress bar starts (quaternary).
Error notifications can shake or pulse red. Critical alerts can be larger, bolder animations. Match urgency to importance.
Maintain consistent toast sizing. Icons should be crisp. Progress bars should be smooth (use transforms, not width).
Smooth notifications feel polished. Jarring popups annoy users. A well-animated toast conveys professionalism.
.toast {
animation: toastEnter 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.toast.exiting {
animation: toastExit 200ms ease-in forwards;
}
@keyframes toastEnter {
from {
opacity: 0;
transform: translateY(-100%) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes toastExit {
to {
opacity: 0;
transform: translateX(100%);
}
}
.toast-progress {
transform-origin: left;
animation: progress 4000ms linear forwards;
}
transform: translate, scaleopacity: fadeanimation: entrance/exit sequencestransform-origin: progress barsbox-shadow: depthWeekly Installs
76
Repository
GitHub Stars
22
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode65
codex65
gemini-cli61
github-copilot58
cursor57
amp51
React视图过渡API使用指南:实现原生浏览器动画与状态管理
5,700 周安装
Git Commit 助手 - 基于 Conventional Commits 规范自动生成提交信息
170 周安装
Twilio通信开发指南:短信发送与验证API集成教程
169 周安装
Slack Bot Builder教程:使用Bolt框架和Block Kit快速构建Slack聊天机器人
167 周安装
前端设计技能目录 | AI助手与开发工具集成指南
76 周安装
xcodebuildmcp-cli:简化Xcode构建与测试的命令行工具,支持iOS/macOS开发自动化
167 周安装
XLSX 生成器 - 自动化 Excel 报表生成与模板处理工具 (Deno)
171 周安装