Motion handoff

静音 → 收听这段

同一组元素切换状态；全部动画同时开始、同时结束。

Duration350ms Easing(0.53, 0.28, 0, 1)
LIVE PREVIEWSTATE 1 · 静音
PROPERTY
0ms175ms350ms
FROM → TO
操作胶囊left / width
292 / 63px→264 / 91px
胶囊材质background
white 20%→#A1392B
倍速按钮left
244px→216px
卡片背景background
#9F3224→#FFF + red 5%
正文颜色color
white 35%→#3C3C43 30%
图标交叉淡化opacity · 原地
playing 1 / mute 0→playing 0 / mute 1
文本交叉淡化opacity · 原地
静音 1 / 收听 0→静音 0 / 收听 1

实现参数

--duration: 350ms;
--ease: cubic-bezier(.53, .28, 0, 1);

/* 位移、尺寸、颜色共用同一 transition */
transition: left var(--duration) var(--ease),
            width var(--duration) var(--ease),
            background var(--duration) var(--ease),
            color var(--duration) var(--ease);

/* 两组 icon / 文本叠在各自固定位置，仅切 opacity */
transition: opacity var(--duration) var(--ease);