# CSS3核心特性-第9章-9.3-过渡效果（transition） ## 一、学习目标 - 掌握过渡效果的核心语法及6个关键属性 - 理解过渡四要素（属性、时长、缓动函数、延迟）的作用 - 实现3种常见交互动效（颜色过渡、尺寸变换、位置移动） - 区分过渡与动画的适用场景及性能优化技巧 ## 二、概念讲解 过渡效果（`transition`）是CSS3引入的**状态间平滑过渡**技术，允许元素在不同状态（如`hover`、`active`）切换时，属性值通过动画方式渐变，而非瞬间变化。其核心价值在于： - **简化动画实现**：无需JavaScript即可创建基础动效 - **提升用户体验**：平滑的状态变化减少视觉突兀感 - **性能优势**：浏览器对过渡进行硬件加速，效率高于JS动画 **过渡与动画的区别**： | **特性** | **过渡（transition）** | **动画（animation）** | | -------------- | -------------------------------------- | ---------------------------------------- | | **触发方式** | 需要状态变化触发（如hover、class切换） | 可自动触发（通过`animation-play-state`） | | **关键帧控制** | 仅支持开始/结束两个状态 | 支持多关键帧精确控制 | | **适用场景** | 简单状态切换（如按钮悬停、菜单展开） | 复杂序列动画（如加载动画、进度条） | ## 三、语法参考 ### 3.1 简写属性 ```css transition: [属性名] [时长] [缓动函数] [延迟时间]; ``` - **属性名**：指定要过渡的CSS属性（如`width`、`background-color`，`all`表示所有可动画属性） - **时长**：过渡持续时间（单位`s`或`ms`，如`0.3s`） - **缓动函数**：控制动画速度变化（如`ease`、`linear`、贝塞尔曲线） - **延迟时间**：延迟开始过渡的时间（单位`s`或`ms`，默认`0s`） ### 3.2 完整属性拆分 | 属性名 | 作用 | 示例值 | | ---------------------------- | ------------ | ------------------------------------------ | | `transition-property` | 指定过渡属性 | `width, background-color` | | `transition-duration` | 设置过渡时长 | `0.5s` | | `transition-timing-function` | 定义缓动函数 | `ease-in-out`、`cubic-bezier(0.4,0,0.2,1)` | | `transition-delay` | 设置延迟时间 | `0.2s` | ### 3.3 常用缓动函数 | 函数名 | 效果描述 | 适用场景 | | ----------------------- | ---------------- | ------------------ | | `linear` | 匀速运动 | 进度条、匀速位移 | | `ease` | 慢→快→慢（默认） | 按钮悬停、简单变换 | | `ease-in` | 加速运动 | 下拉菜单展开 | | `ease-out` | 减速运动 | 弹窗淡入、元素退场 | | `ease-in-out` | 加速→减速 | 卡片翻转、平滑滚动 | | `cubic-bezier(n,n,n,n)` | 自定义贝塞尔曲线 | 精细控制动效节奏 | ## 四、实战示例 ### 4.1 基础示例：按钮悬停效果 ```html 悬停我 ``` **效果解析**： - 鼠标悬停时，背景色从`#4CAF50`平滑过渡到`#3d8b40`（时长0.3s） - 同时元素轻微放大1.05倍（时长0.2s，减速运动） - 点击时缩小至0.98倍，增强交互反馈 ### 4.2 进阶示例：卡片翻转效果 ```html ``` **核心技术点**： - 结合3D变换（`rotateY`）与过渡（`transition`）实现平滑翻转 - 使用`perspective`创建透视效果，增强立体感 - 自定义贝塞尔曲线（`cubic-bezier`）实现“回弹”效果 ### 4.3 常见错误示例及修正 #### ❌ 错误1：未指定过渡属性 ```css /* 错误 */ .box { transition: 0.3s; } /* 缺少属性名，部分浏览器不生效 */ /* 正确 */ .box { transition: all 0.3s; } /* 显式指定属性（推荐指定具体属性而非all） */ ``` #### ❌ 错误2：过渡不可动画属性 ```css /* 错误 */ .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”？ ```css /* 请补充代码 */ .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文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition) - [CSS-Tricks 过渡速查表](https://css-tricks.com/almanac/properties/t/transition/) - [贝塞尔曲线可视化工具](https://cubic-bezier.com/)（推荐自定义缓动函数时使用） 通过本章学习，你已掌握过渡效果的核心语法与实战技巧，下一章节将学习更复杂的关键帧动画（`@keyframes`），实现更精细的动效控制。