Gooey Effect (粘滞融合)

一团有机形状持续不断地改变自身轮廓。

在[应用位置]添加“液态变形”(Blob Morph)循环动画，也叫 morphing blob 或 animated blob。
一团有机形状一边缓缓转动，一边不停地慢慢改变轮廓：流畅柔和，没有尖角。
循环要无缝衔接，形状不能跳变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。

一个词在同一位置模糊并融合成下一个词。

在[应用位置]添加“文字变形”(Morphing Text)效果，也叫 text morph。
一个词在同一位置变模糊，以柔和、黏稠的方式融合成下一个词，然后停留片刻再进行下一次切换。
词语之间无缝循环，让屏幕阅读器把这些词当作普通文字读出；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止循环。

汉堡菜单等图标通过线条的旋转和移动变成另一个图标（X）。

在[应用位置]添加“图标变形”(Icon Morph)，也叫汉堡变 X(hamburger to X)或 menu icon morph。
每次按下时，上下两条线先一起滑到中间，再旋转成 X，中间那条线同时淡出；再按一次则反向还原：干脆利落。
做成真正的切换按钮，无障碍标签和展开状态随之变化；图标尺寸保持固定，周围内容不发生位移。

通过为虚线偏移添加动画，让 SVG 描边看起来沿路径被画出来。

在[应用位置]添加“线条绘制”(Line Drawing)动画，也叫路径绘制(path drawing)或自绘 SVG(self-drawing SVG)。
每条描边看起来沿路径从起点到终点顺滑地自己画出来，第二条描边（比如对勾）紧跟在第一条之后。
进入视口时只播放一次，不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的线条。

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

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