CSS3核心特性-第9章-9.3-过渡效果（transition）

一、学习目标

• 掌握过渡效果的核心语法及6个关键属性
• 理解过渡四要素（属性、时长、缓动函数、延迟）的作用
• 实现3种常见交互动效（颜色过渡、尺寸变换、位置移动）
• 区分过渡与动画的适用场景及性能优化技巧

二、概念讲解

过渡效果（transition）是CSS3引入的状态间平滑过渡技术，允许元素在不同状态（如hover、active）切换时，属性值通过动画方式渐变，而非瞬间变化。其核心价值在于：

• 简化动画实现：无需JavaScript即可创建基础动效
• 提升用户体验：平滑的状态变化减少视觉突兀感
• 性能优势：浏览器对过渡进行硬件加速，效率高于JS动画

过渡与动画的区别：

三、语法参考

3.1 简写属性

transition: [属性名] [时长] [缓动函数] [延迟时间];

• 属性名：指定要过渡的CSS属性（如width、background-color，all表示所有可动画属性）
• 时长：过渡持续时间（单位s或ms，如0.3s）
• 缓动函数：控制动画速度变化（如ease、linear、贝塞尔曲线）
• 延迟时间：延迟开始过渡的时间（单位s或ms，默认0s）

3.2 完整属性拆分

3.3 常用缓动函数

四、实战示例

4.1 基础示例：按钮悬停效果

<button class="transition-btn">悬停我</button>

<style>
.transition-btn {
  width: 120px;
  height: 40px;
  border: none;
  border-radius: 4px;
  background: #4CAF50;
  color: white;
  font-size: 16px;
  cursor: pointer;
  
  /* 过渡配置 */
  transition: 
    background-color 0.3s ease,  /* 背景色过渡 */
    transform 0.2s ease-out;    /* 变换过渡 */
}

.transition-btn:hover {
  background-color: #3d8b40;  /* 背景色变化 */
  transform: scale(1.05);      /* 轻微放大 */
}

.transition-btn:active {
  transform: scale(0.98);      /* 点击缩小 */
}
</style>

效果解析：

• 鼠标悬停时，背景色从#4CAF50平滑过渡到#3d8b40（时长0.3s）
• 同时元素轻微放大1.05倍（时长0.2s，减速运动）
• 点击时缩小至0.98倍，增强交互反馈

4.2 进阶示例：卡片翻转效果

<div class="card-container">
  <div class="card">
    <div class="card-front">正面</div>
    <div class="card-back">背面</div>
  </div>
</div>

<style>
.card-container {
  perspective: 1000px; /* 父容器添加透视 */
}

.card {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d; /* 保留3D空间 */
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.card-front {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}

.card-back {
  background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
  transform: rotateY(180deg); /* 初始背面翻转180度 */
}

.card-container:hover .card {
  transform: rotateY(180deg); /* 悬停时整体翻转 */
}
</style>

核心技术点：

• 结合3D变换（rotateY）与过渡（transition）实现平滑翻转
• 使用perspective创建透视效果，增强立体感
• 自定义贝塞尔曲线（cubic-bezier）实现“回弹”效果

4.3 常见错误示例及修正

❌ 错误1：未指定过渡属性

/* 错误 */
.box { transition: 0.3s; } /* 缺少属性名，部分浏览器不生效 */

/* 正确 */
.box { transition: all 0.3s; } /* 显式指定属性（推荐指定具体属性而非all） */

❌ 错误2：过渡不可动画属性

/* 错误 */
.box { transition: display 0.3s; } /* display属性不可过渡 */

/* 正确 */
.box { transition: opacity 0.3s; } /* 使用opacity替代控制显示隐藏 */

五、注意事项

5.1 性能优化

• 避免过渡all属性：仅指定需要过渡的属性（如width, background），减少浏览器重绘范围
• 优先过渡变换属性：transform（translate/scale/rotate）和opacity属性可触发硬件加速，性能优于width/height等盒模型属性
• 控制过渡时长：基础动效建议时长0.2-0.5s，复杂动效不超过1s，避免用户等待疲劳

5.2 浏览器兼容性

• 主流浏览器支持：Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+
• 旧版浏览器处理：IE10+部分支持，需添加厂商前缀（如-ms-transition），但建议通过Autoprefixer工具自动处理
• 不支持浏览器：过渡效果降级为瞬间变化，不影响功能可用性

5.3 与动画的配合

• 过渡：适合状态切换（如hover、class变化），代码简洁
• 动画：适合复杂序列（如加载动画、循环动效），需定义@keyframes
• 组合使用：过渡可作为动画的补充，例如动画结束后通过过渡返回初始状态

六、自测题

1. 以下哪个属性用于控制过渡效果的速度变化曲线？ A. transition-delay B. transition-timing-function C. transition-property

2. 如何实现“鼠标悬停时元素宽度从100px过渡到200px，背景色从红变蓝，时长0.5s”？

   /* 请补充代码 */
   .box {
     width: 100px;
     background: red;
     _______________; /* 填写过渡属性 */
   }
   .box:hover {
     width: 200px;
     background: blue;
   }
   

3. 为什么说transform: translate()比top/left定位性能更好？

答案：

1. B
2. transition: width 0.5s, background 0.5s
3. transform触发GPU加速，不会导致页面重排（reflow），而top/left会频繁触发重排，性能较差

七、扩展阅读

• MDN transition文档
• CSS-Tricks 过渡速查表
• 贝塞尔曲线可视化工具（推荐自定义缓动函数时使用）

通过本章学习，你已掌握过渡效果的核心语法与实战技巧，下一章节将学习更复杂的关键帧动画（@keyframes），实现更精细的动效控制。