Line Drawing (线条绘制)

先以描边绘出字母轮廓，再显示填充。

在[应用位置]添加“描边文字绘制”(Stroke Text Draw)效果，也叫 draw in text 或 animated stroke text。
字母轮廓顺滑地逐笔画出，轮廓完成后填充再淡入。
页面加载时只播放一次，让文字保持为可访问的真实文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示已填充的文字。

勾选时，方框内的对勾一笔一笔地画出来。

在[应用位置]添加“复选框勾选绘制”(Checkbox Check Draw)动画，也叫动画复选框(animated checkbox)或对勾绘制(checkmark draw)。
勾选时，方框填充颜色，对勾以一笔快速流畅的线条自己画出来；取消勾选时以同样方式擦除。
保持它是带选中状态的真正复选框，可以用键盘操作，并有清晰可见的焦点环。

圆圈和对勾自行画出，确认操作已成功。

在[应用位置]添加“成功对勾”(Success Checkmark)动画，也叫 animated success tick。
先用一笔流畅的线条画出圆圈，接着在圆圈内画出对勾，整个图标再轻轻弹一下：沉稳、笃定。
操作成功时只播放一次，配上屏幕阅读器能播报的文字提示；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的图标。

悬停时，链接下方的下划线从一侧或中间延伸出来。

在[应用位置]添加“下划线绘制”(Underline Draw)悬停效果，也叫动画下划线(animated underline)或悬停下划线动画(hover underline animation)。
指针停在链接上时，文字下方的下划线从左到右平滑延伸，指针移开后再收回：快速而含蓄。
不要让下划线挤动周围布局，并且在键盘聚焦时呈现同样的效果。

元素沿自定义曲线路径移动，并可随路径旋转朝向。

在[应用位置]添加“运动路径”(Motion Path)动画，也叫 animate along path。
一个小元素沿自定义曲线路线缓慢、匀速地移动，并随时转向前进的方向。
使用闭合路线，让循环重复时没有跳变；路线要随容器缩放，而不是固定尺寸。

小圆点或图标沿圆形轨道绕中心旋转。

在[应用位置]添加“环绕轨道”(Orbiting Circles)，也叫 orbit animation 或 orbiting icons。
小圆点沿圆形轨道缓慢、匀速地绕中心元素旋转，外圈则以更慢的速度反向旋转。
循环要无缝，环绕的元素始终保持正立；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。

一个矢量形状平滑地变成另一个形状。

在[应用位置]添加“形状变形”(Shape Morph)，也叫路径变形(path morphing)或 SVG morph。
一个形状平滑地变成另一个形状，比如五边形向内收缩成星形，各个点以均匀、从容的节奏滑到位置上。
让两个形状拥有数量相同且一一对应的点，使变形干净、不闪烁；每次状态变化时播放一次，不要循环。