交互与输入
用于指针、键盘、选择与直接操控的界面动画。
卡片伸缩 / Card Resize
用于界面反馈的「卡片伸缩」响应式动效。
磁吸按钮 / Magnetic Button
用于界面反馈的「磁吸按钮」响应式动效。
数字计数器 / Number Counter
用于界面反馈的「数字计数器」响应式动效。
通知过冲 / Toast Overshoot
用于界面反馈的「通知过冲」响应式动效。
标签滑块 / Tab Pill Glide
用于界面反馈的「标签滑块」响应式动效。
手风琴弹簧 / Accordion Spring
用于界面反馈的「手风琴弹簧」响应式动效。
拖动关闭 / Drag to Dismiss
用于界面反馈的「拖动关闭」响应式动效。
涟漪反馈 / Ripple Feedback
用于界面反馈的「涟漪反馈」响应式动效。
长按确认 / Hold to Confirm
用于界面反馈的「长按确认」响应式动效。
橡皮筋滑块 / Rubber-band Slider
用于界面反馈的「橡皮筋滑块」响应式动效。
点赞爆发 / Like Burst
用于界面反馈的「点赞爆发」响应式动效。
光标拖尾 / Cursor Trail
用于界面反馈的「光标拖尾」响应式动效。
按压按钮 / Push Button
用于界面反馈的「按压按钮」响应式动效。
星级评分 / Star Rating
用于界面反馈的「星级评分」响应式动效。
浮动标签 / Floating Label
用于界面反馈的「浮动标签」响应式动效。
复制按钮 / Copy Button
用于界面反馈的「复制按钮」响应式动效。
数量步进器 / Quantity Stepper
用于界面反馈的「数量步进器」响应式动效。
选择标签 / Choice Chips
用于界面反馈的「选择标签」响应式动效。
验证码输入 / PIN Input
用于界面反馈的「验证码输入」响应式动效。
密码强度 / Password Meter
用于界面反馈的「密码强度」响应式动效。
指针提示 / Pointer Tooltip
用于界面反馈的「指针提示」响应式动效。
滑动显现 / Swipe to Reveal
用于界面反馈的「滑动显现」响应式动效。
旋转旋钮 / Rotary Knob
用于界面反馈的「旋转旋钮」响应式动效。
可排序列表 / Reorderable List
用于界面反馈的「可排序列表」响应式动效。
展开搜索 / Expanding Search
用于界面反馈的「展开搜索」响应式动效。
挤压按钮 / Squish Button
用于界面反馈的「挤压按钮」响应式动效。
切换胶囊 / Toggle Pills
用于界面反馈的「切换胶囊」响应式动效。
数值拖拽器 / Value Scrubber
用于界面反馈的「数值拖拽器」响应式动效。
速拨悬浮按钮 / Speed-Dial FAB
用于界面反馈的「速拨悬浮按钮」响应式动效。
色板选择器 / Swatch Picker
用于界面反馈的「色板选择器」响应式动效。
滑动解锁 / Slide to Unlock
用于界面反馈的「滑动解锁」响应式动效。
标签输入 / Tag Input
用于界面反馈的「标签输入」响应式动效。
键帽按压 / Keycap Press
用于界面反馈的「键帽按压」响应式动效。
轨道操作菜单 / Orbital Action Menu
用于界面反馈的「轨道操作菜单」响应式动效。
上下文程序坞 / Contextual Dock
用于界面反馈的「上下文程序坞」响应式动效。
惯性表盘 / Inertial Dial
用于界面反馈的「惯性表盘」响应式动效。
弹性套索 / Elastic Lasso
用于界面反馈的「弹性套索」响应式动效。
悬停意图门 / Hover Intent Gate
用于界面反馈的「悬停意图门」响应式动效。
组合手势 / Gesture Chord
用于界面反馈的「组合手势」响应式动效。
反馈与状态
用于表达进度、确认、状态与系统响应的动画。
乱序显现 / Scramble Reveal
用于界面反馈的「乱序显现」响应式动效。
动量跑马灯 / Momentum Marquee
用于界面反馈的「动量跑马灯」响应式动效。
错峰入场 / Stagger Entrance
用于界面反馈的「错峰入场」响应式动效。
图标变形切换 / Icon Morph Swap
用于界面反馈的「图标变形切换」响应式动效。
下划线绘制 / Underline Draw
用于界面反馈的「下划线绘制」响应式动效。
弹性进度 / Elastic Progress
用于界面反馈的「弹性进度」响应式动效。
延迟提示 / Delayed Tooltip
用于界面反馈的「延迟提示」响应式动效。
开关弹簧 / Switch Spring
用于界面反馈的「开关弹簧」响应式动效。
复选框绘制 / Checkbox Draw
用于界面反馈的「复选框绘制」响应式动效。
打字机 / Typewriter
用于界面反馈的「打字机」响应式动效。
里程表计数 / Odometer Count-up
用于界面反馈的「里程表计数」响应式动效。
状态胶囊 / Status Pill
用于界面反馈的「状态胶囊」响应式动效。
脉冲徽标 / Pulse Badge
用于界面反馈的「脉冲徽标」响应式动效。
成功勾选 / Success Check
用于界面反馈的「成功勾选」响应式动效。
分段加载器 / Segment Loader
用于界面反馈的「分段加载器」响应式动效。
轨道转圈 / Orbit Spinner
用于界面反馈的「轨道转圈」响应式动效。
环形进度 / Progress Ring
用于界面反馈的「环形进度」响应式动效。
通知滑入 / Notification Slide-in
用于界面反馈的「通知滑入」响应式动效。
步骤进度 / Step Progress
用于界面反馈的「步骤进度」响应式动效。
撤销提示条 / Undo Snackbar
用于界面反馈的「撤销提示条」响应式动效。
提交状态 / Submit States
用于界面反馈的「提交状态」响应式动效。
倒计时环 / Countdown Ring
用于界面反馈的「倒计时环」响应式动效。
骨架屏转内容 / Skeleton to Content
用于界面反馈的「骨架屏转内容」响应式动效。
通知堆叠 / Toast Stack
用于界面反馈的「通知堆叠」响应式动效。
不定进度条 / Indeterminate Bar
用于界面反馈的「不定进度条」响应式动效。
脉冲徽标二 / Pulse Badge II
用于界面反馈的「脉冲徽标二」响应式动效。
闪光骨架屏 / Shimmer Skeleton
用于界面反馈的「闪光骨架屏」响应式动效。
输入指示器 / Typing Indicator
用于界面反馈的「输入指示器」响应式动效。
心跳监视器 / Heartbeat Monitor
用于界面反馈的「心跳监视器」响应式动效。
电量充电 / Battery Charge
用于界面反馈的「电量充电」响应式动效。
信号条 / Signal Bars
用于界面反馈的「信号条」响应式动效。
徽标计数器 / Badge Counter
用于界面反馈的「徽标计数器」响应式动效。
书签切换 / Bookmark Toggle
用于界面反馈的「书签切换」响应式动效。
数据包轨迹 / Packet Trace
用于界面反馈的「数据包轨迹」响应式动效。
相位锁定 / Phase Lock
用于界面反馈的「相位锁定」响应式动效。
校验和绽放 / Checksum Bloom
用于界面反馈的「校验和绽放」响应式动效。
回声回执 / Echo Receipt
用于界面反馈的「回声回执」响应式动效。
状态差异 / State Diff
用于界面反馈的「状态差异」响应式动效。
信号盲文 / Signal Braille
用于界面反馈的「信号盲文」响应式动效。
表面与运动
面向空间、材质、文字与氛围效果的表现型动画。
错误抖动 / Error Shake
用于界面反馈的「错误抖动」响应式动效。
彩纸爆发 / Confetti Burst
用于界面反馈的「彩纸爆发」响应式动效。
视差倾斜 / Parallax Tilt
用于界面反馈的「视差倾斜」响应式动效。
波浪加载器 / Wave Loader
用于界面反馈的「波浪加载器」响应式动效。
骨架扫光 / Skeleton Sweep
用于界面反馈的「骨架扫光」响应式动效。
页面剥离 / Page Peel
用于界面反馈的「页面剥离」响应式动效。
光标聚光灯 / Cursor Spotlight
用于界面反馈的「光标聚光灯」响应式动效。
翻转卡片 / Flip Card
用于界面反馈的「翻转卡片」响应式动效。
故障文字 / Glitch Text
用于界面反馈的「故障文字」响应式动效。
边框光束 / Border Beam
用于界面反馈的「边框光束」响应式动效。
极光漂移 / Aurora Drift
用于界面反馈的「极光漂移」响应式动效。
高光扫过 / Shine Sweep
用于界面反馈的「高光扫过」响应式动效。
呼吸球体 / Breathing Orb
用于界面反馈的「呼吸球体」响应式动效。
悬浮摆动 / Float Bob
用于界面反馈的「悬浮摆动」响应式动效。
液态团块 / Liquid Blob
用于界面反馈的「液态团块」响应式动效。
渐变闪光文字 / Gradient Shimmer Text
用于界面反馈的「渐变闪光文字」响应式动效。
霓虹脉冲 / Neon Glow Pulse
用于界面反馈的「霓虹脉冲」响应式动效。
均衡器条 / Equalizer Bars
用于界面反馈的「均衡器条」响应式动效。
雷达脉冲 / Radar Pulse
用于界面反馈的「雷达脉冲」响应式动效。
牛顿摆 / Newton's Cradle
用于界面反馈的「牛顿摆」响应式动效。
弹跳小球 / Bouncing Ball
用于界面反馈的「弹跳小球」响应式动效。
跑马灯显现 / Marquee Reveal
用于界面反馈的「跑马灯显现」响应式动效。
渐变边框变形 / Gradient Border Morph
用于界面反馈的「渐变边框变形」响应式动效。
文字分割显现 / Text Split Reveal
用于界面反馈的「文字分割显现」响应式动效。
悬停抬升 / Hover Lift
用于界面反馈的「悬停抬升」响应式动效。
光泽扫过 / Sheen Sweep
用于界面反馈的「光泽扫过」响应式动效。
裁剪擦除 / Clip Wipe
用于界面反馈的「裁剪擦除」响应式动效。
三维立方体旋转 / 3D Cube Rotate
用于界面反馈的「三维立方体旋转」响应式动效。
果冻摇摆 / Jelly Wobble
用于界面反馈的「果冻摇摆」响应式动效。
折叠门 / Folding Doors
用于界面反馈的「折叠门」响应式动效。
前后对比 / Before / After
用于界面反馈的「前后对比」响应式动效。
深度堆叠 / Depth Stack
用于界面反馈的「深度堆叠」响应式动效。
文字波浪 / Text Wave
用于界面反馈的「文字波浪」响应式动效。
焦散玻璃 / Caustic Glass
用于界面反馈的「焦散玻璃」响应式动效。
色差分离 / Chromatic Split
用于界面反馈的「色差分离」响应式动效。
扭曲网格 / Warp Grid
用于界面反馈的「扭曲网格」响应式动效。
莫尔透镜 / Moiré Lens
用于界面反馈的「莫尔透镜」响应式动效。
偏振箔片 / Polarized Foil
用于界面反馈的「偏振箔片」响应式动效。
融球桥接 / Metaball Bridge
用于界面反馈的「融球桥接」响应式动效。
Transitions.dev 精选
参考 transitions.dev 免费目录的产品过渡模式，由 JGuang 重新原创实现。
卡片尺寸切换 / Card resize
在保持内容视觉连续性的同时展开紧凑卡片。
数字弹入 / Number pop-in
让变化后的数字通过短促过冲弹入就位。
通知徽标 / Notification badge
在不移动锚点的情况下显现并更新通知数量。
文字状态切换 / Text states swap
通过裁剪的垂直过渡切换状态文字。
菜单下拉 / Menu dropdown
从触发按钮以缩放与透明度过渡打开操作菜单。
弹窗打开与关闭 / Modal open / close
协调弹窗与遮罩的进入和退出状态。
面板显现 / Panel reveal
使用水平裁剪过渡显现辅助内容面板。
并排页面切换 / Page side-by-side
在相邻页面画布间移动并保留空间上下文。
图标切换 / Icon swap
在固定点击区域内旋转缩放切换两个操作图标。
成功勾选 / Success check
操作完成后绘制确认勾选。
头像组悬停 / Avatar group hover
在悬停或键盘聚焦时展开重叠头像。
错误状态抖动 / Error state shake
短暂抖动无效输入框，同时保持错误信息清晰。
输入清除溶解 / Input clear with dissolve
执行清除操作时让输入文字溶解并恢复空状态。
骨架屏加载与显现 / Skeleton loader and reveal
让紧凑骨架屏淡入真实内容且不产生布局跳动。
文字微光 / Shimmer text
在短文字标签上扫过克制的高光。
标签页滑动 / Tabs sliding
在标签触发器之间滑动共享选择指示器。
提示框打开与关闭 / Tooltip open/close
通过短距离位移与透明度过渡显示锚定提示框。
多行文字显现 / Texts reveal
以裁剪和错峰上移的方式显现多行文字。
卡片悬停倾斜 / Card hover tilt
让卡片朝向指针倾斜，同时保持内容可读。
加号变菜单 / Plus to menu morph
将加号变形成关闭控件，同时显现相邻操作。
手风琴展开 / Accordion expand
使用网格轨道插值展开折叠内容。
通知条打开与关闭 / Toast open/close
让通知条从最近的视口边缘进入并退出。
点赞按钮 / Like button
通过缩放脉冲和小型放射粒子确认点赞。
了解更多悬停 / Learn more hover
移动箭头和下划线以提示导航操作。
复选框勾选 / Checkbox check
在控件表面变色的同时绘制勾选状态。
旋转计数器 / Spinning counter
按需滚动数字列至下一个数值。
开关切换 / Toggle
让弹簧感滑块在两个清晰标注的状态间移动。
动画目录名称与产品灵感参考 ckissi 的公开项目 Kinetics 以及 transitions.dev 的免费模式目录。本页所有 React 预览与可复制示例均由 JGuang 原创实现，且不重新分发任一上游实现：Kinetics 的参考提交中未发现许可证文件，transitions.dev 条款则禁止重新分发其动画库本身。