入场与退场 · 出现和消失
翻滚Roll
- 一路滚
- 转满一圈
- 落定
元素像轮子一样滚进来：一边平移一边自己转满一圈，停下时正好转回正向。转的角度和平移的距离是绑死的 —— 距离缩短，圈数也要跟着减，否则看起来会「打滑」。
什么时候用它
想表达「这东西是一路过来的」时用它 —— 一个从列表滚进来的徽章、一枚落袋的筹码、一条滚出来的提示。它的代价是占时长，所以一次只让一个元素滚。
参数
transform: translateX -100%→0 · rotate -360deg→0deg · opacity 0→1 · 460ms ease-out
配方
翻滚 → transform: translateX -100%→0 · rotate -360deg→0deg · opacity 0→1 · 460ms ease-out
给 AI 的一句话
做一个翻滚入场：translateX 从 -100% 到 0，同时 rotate 从 -360deg 到 0deg，460ms ease-out，opacity 从 0 跟着到 1。rotate 和 translate 必须写在同一个 transform 里并且时长一致，分两条 transition 会各走各的、看起来像在打滑。