前端Wiki/CSS3/进阶/过渡 transition

多属性与缓动函数

transition 支持逗号分隔多个属性，各自指定时长和缓动，做出有层次的动画——比如悬停卡片时，阴影慢一点、位移快一点。

常用缓动函数的「手感」完全不同：

linear：匀速，机械感强，适合进度类。
ease（默认）：慢进慢出。
ease-out：快进慢出，先到位置再缓缓停住——界面反馈首选，感觉响应快。
ease-in：慢进快出，像加速离开。
cubic-bezier(x1,y1,x2,y2)：自定义曲线。cubic-bezier(.68,-.55,.27,1.55) 这种 y 超出 0~1 的曲线会产生回弹效果。

经验法则：元素「进入视野/回应操作」用 ease-out，「退出/消失」用 ease-in；弹性类效果直接用带回弹的 bezier。

本节要点逗号分隔多属性分别配置；ease-out 用于进入、ease-in 用于退出；cubic-bezier 的 y 值超出 0~1 可产生回弹。

CSS

<style>
  .card {
    width: 200px; padding: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    /* 多属性分别设置缓动与时长 */
    transition:
      transform .25s cubic-bezier(.68,-.55,.27,1.55),
      box-shadow .4s ease-out;
  }
  .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
  }
</style>
<div class="card">
  悬停我：位移带一点回弹，
  阴影缓缓加深
</div>

🔗 相关词条transition 元素阴影函数

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读