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

transition 基础

transition 让属性值的变化平滑进行而不是瞬间跳变。它写在「稳定状态」的选择器上，当状态改变（如 hover）时自动生成补间动画。

四个子属性：transition: 属性时长缓动函数延迟;

property：要过渡的属性名，如 color、transform。写 all 表示全部（方便但可能有意外开销）。
duration：时长，如 .3s。交互反馈常用 0.2~0.4 秒。
timing-function：缓动，默认 ease。
delay：延迟后才开始。

两个关键认知：

transition 需要触发状态切换（hover、class 变化、属性被 JS 修改）才会播放，它不能自动循环——循环要找 animation。
并非所有属性都能过渡：颜色、尺寸、transform、opacity 可以；display 不能（没有中间值），改用 visibility 或 opacity 方案。

本节要点transition 写在起始状态上，四段式「属性时长缓动延迟」；需要状态切换触发；display 无法过渡，opacity/visibility 可以。

CSS

<style>
  .box {
    width: 100px; height: 40px;
    background: #39c5cf;
    /* 写在稳定态：进入和离开都有过渡 */
    transition: background .3s, width .3s;
  }
  .box:hover {
    background: #7c4dff;
    width: 160px;
  }
  .fade {
    margin-top: 10px;
    width: 100px; height: 40px;
    background: #ffb74d;
    /* 延迟 0.2s 后开始过渡 */
    transition: opacity .4s ease .2s;
  }
  .fade:hover { opacity: .3; }
</style>
<div class="box">悬停变色变宽</div>
<div class="fade">悬停淡出（延迟0.2s）</div>

🔗 相关词条transition animation transform 缓动函数选择器 JS 函数

📚 推荐阅读

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

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

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

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

ECharts 图表教程万象云档

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