MotionLang

细节与特效 · 耐看的小细节

文字形变Text morph

一个词被另一个词替换时,旧文字向上淡出、新文字从下方补上,像一个词换了个身。

在工具里打开这条

什么时候用它

标题里的轮播词、状态标签切换用它;段落正文替换不要用,会看不清。

参数

transform: translateY 100%→0 alternating · per word 260ms · cubic-bezier(0.22, 1, 0.36, 1) · alternating offset 60ms

配方

  1. 每个词 260ms
  2. 文字形变 → translateY 100% → 0 @ 260ms cubic-bezier(0.22, 1, 0.36, 1)
  3. 往返错峰 60ms

给 AI 的一句话

做文字形变效果:旧词向上移出并淡出、新词从下方移入,每词 260ms、cubic-bezier(0.22, 1, 0.36, 1),两词偏移 60ms。

同类的其他动效