← 返回导航

缩放进出效果

transitions
弹性弹入
圆形缩放
中心扩散
顶部展开
顶部展开
旋转缩放
旋转弹入

关键点

  • 缩放进出效果通过 transform: scale() 实现元素的放大进入和缩小退出
  • 进入时从 scale(0) 或 scale(0.8) 放大到 scale(1)，有"弹出"感
  • 配合 opacity 同步过渡，让出现和消失更柔和，不生硬
  • 使用 cubic-bezier 自定义弹性曲线，可以实现带回弹的弹性动画
  • 缩放动效常用于弹窗、提示气泡、菜单展开等场景，强调感强

效果说明

元素从 scale(0) 弹入或缩放出的过渡效果。配合弹性贝塞尔曲线实现回弹效果，常用于弹窗、提示、菜单展开等场景。这里展示 4 种变体：弹性弹入、中心扩散、顶部展开、旋转弹入。点击上方按钮触发动画。