香肠跳伞派对手游
40.31MB · 2025-11-30
在 CSS 中，transition 是用于实现元素样式平滑过渡的属性，能让元素从一种样式状态（如颜色、尺寸、位置等）逐渐变化到另一种状态，避免样式突变带来的生硬感。它是实现基础动画效果的核心工具，广泛用于 hover 交互、状态切换等场景。
transition 核心语法transition 是一个复合属性，可以同时定义过渡的多个参数，语法如下：
css
transition: [过渡属性] [过渡时长] [过渡 timing 函数] [延迟时间];各参数的含义和规则：
| 参数 | 说明 | 可选值 / 示例 | 是否必填 |
|---|---|---|---|
| 过渡属性（property） | 指定哪些 CSS 属性需要过渡（如 width、background，all 表示所有属性） | width、background、all 等 | 否（默认 all） |
| 过渡时长（duration） | 过渡效果持续的时间（必须设置，否则无过渡效果） | 0.3s、500ms（秒 / 毫秒） | 是 |
| timing 函数 | 过渡速度的变化曲线（控制动画的 “节奏感”） | ease（默认）、linear、ease-in 等 | 否 |
| 延迟时间（delay） | 延迟多久开始过渡 | 0s（默认）、0.5s | 否 |
transition-property）all：所有可过渡的属性变化都触发（常用，但性能略差）。width、height、background-color、transform 等（推荐按需指定，优化性能）。display（无法平滑过渡）、position 等，可过渡属性参考 MDN 列表。transition-duration）0s，无过渡）。s（秒）或 ms（毫秒），如 0.5s 或 500ms。transition-duration: 0.3s 表示过渡持续 0.3 秒。transition-timing-function）ease（默认）：先慢 → 快 → 慢（适合大多数交互）。linear：匀速（适合平移、旋转等均匀运动）。ease-in：开始慢，逐渐加快（适合 “进入” 场景）。ease-out：开始快，逐渐减慢（适合 “退出” 场景）。ease-in-out：开始和结束都慢，中间快（对称效果）。cubic-bezier(x1, y1, x2, y2) 可自定义复杂曲线（如 cubic-bezier(0.25, 0.1, 0.25, 1)）。transition-delay）transition-delay: 0.2s 表示触发后等待 0.2 秒再开始过渡。实现按钮在 hover 时背景色、阴影、尺寸的平滑过渡：
<!DOCTYPE html><html><head> <style> .btn { padding: 10px 20px; border: none; border-radius: 4px; background: #3b82f6; color: white; font-size: 16px; cursor: pointer; /* 过渡配置：所有属性，0.3秒，ease曲线 */ transition: all 0.3s ease; } .btn:hover { /* hover 时的样式变化 */ background: #2563eb; /* 深色背景 */ transform: translateY(-2px); /* 上移2px */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 加深阴影 */ } </style></head><body> <button class="btn">Hover 我</button></body></html>解析：
transition: all 0.3s ease，表示所有样式变化都将在 0.3 秒内以 ease 曲线过渡。background、transform、box-shadow 同时变化，这些变化会被过渡效果 “平滑化”，而非瞬间切换。通过 transition-delay 让多个元素按顺序触发过渡，形成动画序列：
<!DOCTYPE html><html><head> <style> .container { display: flex; gap: 10px; margin: 20px; } .dot { width: 30px; height: 30px; border-radius: 50%; background: #6366f1; /* 基础过渡配置：尺寸变化，0.3秒 */ transition: transform 0.3s ease; } /* 为每个圆点设置不同延迟 */ .dot:nth-child(1) { transition-delay: 0s; } .dot:nth-child(2) { transition-delay: 0.1s; } .dot:nth-child(3) { transition-delay: 0.2s; } .dot:nth-child(4) { transition-delay: 0.3s; } .container:hover .dot { transform: scale(1.5); /* 所有圆点放大1.5倍 */ } </style></head><body> <div class="container"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div></body></html>解析：
transition-delay 依次增加 0.1s，当容器 hover 时，会按顺序逐个放大，形成 “波浪式” 动画。transition 与 transform（变形）结合是最常用的动画组合，可实现平移、旋转、缩放等效果：
<!DOCTYPE html><html><head> <style> .card { width: 200px; height: 150px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; font-size: 18px; /* 过渡：transform和box-shadow，0.5秒 */ transition: transform 0.5s ease, box-shadow 0.5s ease; } .card:hover { /* 上移+放大+加深阴影 */ transform: translateY(-10px) scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } </style></head><body> <div class="card">Hover 我</div></body></html>解析：
transform 同时实现 translateY（上移）和 scale（放大），transition 让这些变形平滑进行，配合阴影变化，模拟卡片 “浮起” 的立体感。transition 需要样式变化才能触发，常见触发方式：:hover、:active、:focus 等。element.classList.add('active')）。transform 和 opacity，这两个属性不会触发浏览器的 “重排重绘”，性能更好。transition: all（会监听所有属性变化，浪费性能），尽量指定具体属性（如 transition: width 0.3s）。transition 只能实现 “从 A 到 B” 的一次性过渡，无法实现循环动画或复杂时间线动画（这类需求需用 animation 属性）。transition 与 animation 的区别| 特性 | transition | animation |
|---|---|---|
| 触发方式 | 需要样式变化触发（被动） | 可自动触发，支持循环（主动） |
| 复杂度 | 适合简单的 “状态切换” 动画 | 适合复杂的多关键帧动画 |
| 控制能力 | 仅能定义开始和结束状态 | 可定义多个关键帧（@keyframes） |
| 循环 | 不支持循环（需手动重置样式） | 支持 animation-iteration-count 循环 |
简单说：简单交互用 transition，复杂动画用 animation。
通过 transition，只需几行代码就能让元素交互变得生动流畅，是前端开发中提升用户体验的重要工具。掌握其参数组合和使用场景后，可轻松实现按钮反馈、卡片悬浮、菜单展开等常见交互效果。
