首页 / CSS 入门教程 / 过渡 transition

← 上一篇 下一篇 →
CSS 入门教程

过渡 transition

本教程共 44 篇 · 第 38 篇 · 更新于 2026-07-29 · 约 11 分钟阅读

过渡transition动画时间函数ease

38. 过渡 transition

本节目标：掌握 CSS 过渡的四个属性，理解时间函数的区别，能够为状态变化添加平滑的动画效果。

过渡让 CSS 属性值的变化不再是”瞬间跳转”，而是在一段时间内平滑过渡。悬停效果、展开收起、开关切换，都依赖它实现丝滑体验。

过渡的基本用法

要使用过渡，必须指定两件事：

  1. 哪个属性要过渡
  2. 过渡持续多长时间
.button {
  background: #3498DB;
  transition: background 0.3s;
}

.button:hover {
  background: #2980B9;
}
<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .button {
      display: inline-block;
      padding: 12px 28px;
      background: #3498DB;
      color: white;
      border-radius: 6px;
      transition: background 0.3s;
      cursor: pointer;
    }
    .button:hover {
      background: #2980B9;
    }
  </style>
</head>
<body>
  <div class="button">悬停变色</div>
</body>
</html>

过渡必须定义在元素的默认状态上，而不是

上。这样鼠标移入和移出都会有过渡效果。

很多人一开始会把 transition 写到 :hover 里，结果只有移入有动画，移出没有。记住：写在默认状态上。

transition-property：指定过渡属性

transition-property 定义哪些 CSS 属性参与过渡。默认值是 all（所有属性）。

/* 只过渡宽度和背景 */
transition-property: width, background;

/* 过渡所有属性 */
transition-property: all;

/* 不应用过渡 */
transition-property: none;

用

很方便但性能不是最好。生产环境中建议只列出需要过渡的属性。

transition-duration：过渡时长

transition-duration 定义过渡持续的时间。单位是秒（s）或毫秒（ms）。

transition-duration: 0.3s;   /* 300 毫秒 */
transition-duration: 500ms;  /* 同上 */

时长可以是 0（无过渡），也可以是多个值对应多个属性：

transition-property: width, opacity;
transition-duration: 0.3s, 0.6s;

transition-timing-function：时间函数

这个属性控制过渡过程中的速度变化，是过渡效果是否”自然”的关键。

transition-timing-function: ease; /* 默认值 */

常用值：

值效果适用场景
ease慢-快-慢通用，默认值
linear匀速进度条、持续旋转
ease-in慢-快元素离开视图
ease-out快-慢元素进入视图
ease-in-out慢-慢弹窗开关
<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      gap: 16px;
      padding: 30px;
    }
    .box {
      width: 80px;
      height: 80px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      border-radius: 6px;
      cursor: pointer;
    }
    .ease       { background: #3498DB; transition: transform 0.5s ease; }
    .linear     { background: #E74C3C; transition: transform 0.5s linear; }
    .ease-in    { background: #2ECC71; transition: transform 0.5s ease-in; }
    .ease-out   { background: #F39C12; transition: transform 0.5s ease-out; }
    .ease-in-out{ background: #9B59B6; transition: transform 0.5s ease-in-out; }
    .box:hover  { transform: translateY(-20px); }
  </style>
</head>
<body>
  <div class="container">
    <div class="box ease">ease</div>
    <div class="box linear">linear</div>
    <div class="box ease-in">ease-in</div>
    <div class="box ease-out">ease-out</div>
    <div class="box ease-in-out">in-out</div>
  </div>
</body>
</html>

还可以用 cubic-bezier() 自定义贝塞尔曲线：

/* 自定义：先回弹再前进 */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

线上有很多贝塞尔曲线生成工具，比如 cubic-bezier.com。调好曲线直接复制代码。

transition-delay：延迟过渡

transition-delay 让过渡在触发后等待一段时间再开始。

transition-delay: 0.2s; /* 延迟 200ms */
<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .menu {
      width: 200px;
    }
    .item {
      padding: 12px 16px;
      background: #ECF0F1;
      margin-bottom: 1px;
      transition: background 0.2s, transform 0.2s;
      transition-delay: 0.05s;
    }
    .item:hover {
      background: #3498DB;
      color: white;
      transform: translateX(8px);
    }
  </style>
</head>
<body>
  <div class="menu">
    <div class="item">首页</div>
    <div class="item">产品</div>
    <div class="item">关于</div>
  </div>
</body>
</html>

transition 简写属性

transition 简写属性按顺序包含：property、duration、timing-function、delay。

/* 完整写法 */
transition: all 0.3s ease 0s;

/* 常用写法：省略 delay */
transition: all 0.3s ease;

/* 多个属性分别设置 */
transition: width 0.3s ease, height 0.5s ease-in, opacity 0.2s linear;
<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .card {
      width: 120px;
      height: 80px;
      background: #1ABC9C;
      border-radius: 8px;
      transition: width 0.3s ease, height 0.3s ease, background 0.2s linear;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
    .card:hover {
      width: 160px;
      height: 100px;
      background: #16A085;
    }
  </style>
</head>
<body>
  <div class="card">复合过渡</div>
</body>
</html>

过渡 + 变换：制作交互效果

过渡和变换组合，能做出各种精致的微交互：

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      gap: 24px;
      padding: 40px;
    }
    .btn {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .btn:hover {
      transform: scale(1.15) rotate(8deg);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
    .b1 { background: #E74C3C; }
    .b2 { background: #3498DB; }
    .b3 { background: #2ECC71; }
  </style>
</head>
<body>
  <div class="container">
    <div class="btn b1">❤</div>
    <div class="btn b2">★</div>
    <div class="btn b3">✓</div>
  </div>
</body>
</html>

过渡的最佳实践

/* 好的做法：明确属性，合理时长 */
transition: opacity 0.2s ease-out, transform 0.3s ease-out;

/* 避免：过渡太多属性影响性能 */
transition: all 0.5s;

动画时长参考：

  • 悬停反馈：0.15s - 0.3s
  • 展开收起：0.3s - 0.5s
  • 页面切换：0.5s - 1s

过渡属性速查

属性作用默认值
transition-property过渡的属性all
transition-duration过渡时长0s
transition-timing-function速度曲线ease
transition-delay延迟时间0s
transition简写—

过渡是”被动”的：它需要状态变化（如 :hover、类名改变、JS 改样式）才能触发。下一章的动画是”主动”的：不需要触发就能自动播放。

上一篇
3D 变换
下一篇
动画 animation