Bounce (弹跳)
别称 Bounce (attention)
元素上下弹跳，弹跳幅度逐渐减小。
适用场景
向下滚动提示、行动号召按钮
在[应用位置]添加“弹跳”(Bounce)提示效果。
元素向上跳起再落下，快速弹跳几次，每次幅度越来越小，落地时略微压扁。
触发时只播放一次，不要循环；对开启了“减少动态效果”的用户则跳过。Emphasis
Flash (闪烁)
别称 Blink
元素通过快速切换不透明度来闪烁。
适用场景
提示有新内容
在[应用位置]添加“闪烁”(Flash)提示效果，也叫 blink。
元素快速淡出再淡入，闪烁两次，然后保持完全可见。
只播放一次，不要无休止地闪烁；快速闪烁可能让人不适，所以对开启了“减少动态效果”的用户则跳过。Flicker (频闪)
别称 Flickering
元素的不透明度像接触不良的灯一样不规则地闪动。
适用场景
霓虹和故障风效果
在[应用位置]添加“频闪”(Flicker)效果，也叫 flickering。
元素大部分时间保持稳定，偶尔像接触不良的霓虹灯一样短促、不均匀地变暗。
节奏要不规则而不是等间隔，避免全强度的快速闪烁；对开启了“减少动态效果”的用户则停止。Head Shake (摇头)
别称 Headshake, No Shake
元素带着轻微旋转左右摆动，就像摇头表示“不”。
适用场景
输入无效或操作被拒绝
在[应用位置]添加“摇头”(Head Shake)提示效果，也叫 headshake 或 no shake。
元素要像摇头表示“不”一样，带着轻微扭转快速左右转动，每次幅度都比上一次小，最后停稳。
每次触发时只播放一次（比如操作被拒绝时），并且不要让周围的布局跟着移动。Heartbeat (心跳)
别称 Heart Beat
元素以双拍节奏缩放，就像跳动的心脏。
适用场景
点赞和收藏图标、直播状态指示
在[应用位置]添加“心跳”(Heartbeat)效果，也叫 heart beat。
元素要快速地连续膨胀、回缩两次，然后稍作停顿再开始下一次，就像跳动的心脏。
无缝循环播放并保留两次心跳之间的停顿；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止动画。Jello (果冻)
别称 Jelly
元素像晃动的果冻一样来回倾斜变形，幅度逐渐减小。
适用场景
俏皮地强调按钮或 Logo
在[应用位置]添加“果冻”(Jello)提示效果，也叫 jelly。
元素要像晃动的果冻一样来回倾斜变形：一开始幅度大，然后很快平息下来。
触发时只播放一次，并保持元素占据的空间不变，避免周围内容移位。Ping (雷达扩散)
别称 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
元素的副本反复放大并淡出，就像雷达波纹。
适用场景
通知小圆点、实时状态
在[应用位置]添加“雷达扩散”(Ping)效果，也叫雷达波(radar ping)或脉冲环(pulse ring)。
元素的一个副本要向外扩大并淡出，以稳定的节奏一遍遍重复，而元素本身保持不动。
把圆环画在单独的图层上，确保它永远不影响布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止循环。Pulse (脉冲)
别称 Pulsing
元素反复地轻柔缩放或淡入淡出。
适用场景
骨架屏加载、实时状态指示、CTA 按钮
在[应用位置]添加“脉冲”(Pulse)效果，也叫 pulsing。
元素要以缓慢、稳定的节奏轻轻膨胀再回缩：含蓄，不要有弹跳感。
无缝循环播放，不要让周围布局移动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止动画。Rubber Band (橡皮筋)
别称 Rubberband
元素横向拉伸、纵向压扁，经过几次弹性变化后恢复原状。
适用场景
按钮反馈、吸引注意
在[应用位置]添加“橡皮筋”(Rubber Band)提示效果，也叫 rubberband。
元素要先横向拉宽、纵向压扁，再经过几次越来越小的弹性回弹，最后停在正常大小。
触发时只播放一次，并确保拉伸过程中周围布局不会移位。Shake (抖动)
别称 Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
元素沿一个方向快速来回抖动。
适用场景
表单错误反馈
在[应用位置]添加“抖动”(Shake)效果，也叫 error shake 或 invalid input shake。
元素要快速左右抖动几次，然后正好停在起始位置：快速、干脆。
每次出错时播放一次，不要循环；同时显示可见的错误提示，让含义不只依赖动画来传达。Spin (无限旋转)
别称 Rotate Loop, Spinner
元素以恒定速度持续旋转。
适用场景
加载转圈指示器
在[应用位置]添加“无限旋转”(Spin)效果，也叫 spinner 或 rotate loop。
元素要以恒定、均匀的速度持续旋转，每圈之间不要有缓动。
让循环无缝衔接，给 spinner 加上无障碍的“加载中”标签；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就放慢或停止旋转。元素以顶边为支点，像钟摆一样来回摆动，幅度逐渐减小。
适用场景
悬挂的招牌、通知图标
在[应用位置]添加“摇摆”(Swing)提示效果。
元素要像悬挂的招牌一样来回摆动，一开始摆幅很大，然后很快平息。
以顶边而不是中心为支点摆动，触发时只播放一次。元素放大后带着旋转左右晃动，再恢复原来大小，像在庆祝一样。
适用场景
成功状态、庆祝时刻
在[应用位置]添加“庆祝抖动”(Tada)提示效果。
元素要先微微缩小，再放大并快速倾斜着左右晃动，然后恢复正常大小，像一次小小的庆祝。
只播放一次（比如在操作成功后立即播放）；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就跳过这个动画。Vibrate (震动)
别称 Vibration, Buzz
元素向各个方向快速地细微颤动，就像手机在震动。
适用场景
警报提醒、来电式提示
在[应用位置]添加“震动”(Vibrate)提示效果，也叫 buzz 或 vibration。
元素要像手机震动一样，向不同方向快速地细微颤动片刻，然后停下来。
动作幅度要非常小，确保内容仍然清晰可读；每次提醒只播放一次，不要循环。元素像不稳的物体一样，带着倾斜左右摇晃。
适用场景
吸引用户注意图标或按钮
在[应用位置]添加“晃动”(Wobble)提示效果。
元素要带着倾斜左右摇晃，一开始幅度很大，每摆一次就变小，直到停稳。
触发时只播放一次，并避免相邻内容移位。