返回动画列表

形态过渡

Morph Transition

元素在两种形态之间平滑过渡，包括尺寸、圆角、颜色等属性的同步变化。

过渡持续高级

预览

代码

持续时间

600ms

缓动函数

cubic-bezier(0.4, 0, 0.2, 1)

CSS 属性

border-radius, width, height, background-color

使用场景

Button state transitions
Card expand/collapse morph
Navigation indicator morph
Toggle switch animation

相关动画

crossfade morph-shape blur-in