CSS - transition 粗浅记忆
<p>在 CSS 中，<code>transition</code> 是用于实现元素样式<strong>平滑过渡</strong>的属性，能让元素从一种样式状态（如颜色、尺寸、位置等）逐渐变化到另一种状态，避免样式突变带来的生硬感。它是实现基础动画效果的核心工具，广泛用于 hover 交互、状态切换等场景。</p><h3 id="一transition-核心语法">一、<code>transition</code> 核心语法</h3>
<p><code>transition</code> 是一个<strong>复合属性</strong>，可以同时定义过渡的多个参数，语法如下：</p>
<p>css</p>
<pre><code class="language-css">transition: [过渡属性] [过渡时长] [过渡 timing 函数] [延迟时间];
</code></pre>
<p>各参数的含义和规则：</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>可选值 / 示例</th>
<th>是否必填</th>
</tr>
</thead>
<tbody>
<tr>
<td>过渡属性（property）</td>
<td>指定哪些 CSS 属性需要过渡（如 <code>width</code>、<code>background</code>，<code>all</code> 表示所有属性）</td>
<td><code>width</code>、<code>background</code>、<code>all</code> 等</td>
<td>否（默认 <code>all</code>）</td>
</tr>
<tr>
<td>过渡时长（duration）</td>
<td>过渡效果持续的时间（必须设置，否则无过渡效果）</td>
<td><code>0.3s</code>、<code>500ms</code>（秒 / 毫秒）</td>
<td>是</td>
</tr>
<tr>
<td>timing 函数</td>
<td>过渡速度的变化曲线（控制动画的 “节奏感”）</td>
<td><code>ease</code>（默认）、<code>linear</code>、<code>ease-in</code> 等</td>
<td>否</td>
</tr>
<tr>
<td>延迟时间（delay）</td>
<td>延迟多久开始过渡</td>
<td><code>0s</code>（默认）、<code>0.5s</code></td>
<td>否</td>
</tr>
</tbody>
</table>
<h3 id="二核心参数详解">二、核心参数详解</h3>
<h4 id="1-过渡属性transition-property">1. 过渡属性（<code>transition-property</code>）</h4>
<ul>
<li>作用：指定哪些 CSS 属性发生变化时会触发过渡效果。</li>
<li>常见值：
<ul>
<li><code>all</code>：所有可过渡的属性变化都触发（常用，但性能略差）。</li>
<li>具体属性：如 <code>width</code>、<code>height</code>、<code>background-color</code>、<code>transform</code> 等（推荐按需指定，优化性能）。</li>
</ul>
</li>
<li>注意：不是所有 CSS 属性都支持过渡，如 <code>display</code>（无法平滑过渡）、<code>position</code> 等，可过渡属性参考 MDN 列表。</li>
</ul>
<h4 id="2-过渡时长transition-duration">2. 过渡时长（<code>transition-duration</code>）</h4>
<ul>
<li>作用：定义过渡效果从开始到结束的时间，<strong>必须设置</strong>（默认 <code>0s</code>，无过渡）。</li>
<li>单位：<code>s</code>（秒）或 <code>ms</code>（毫秒），如 <code>0.5s</code> 或 <code>500ms</code>。</li>
<li>示例：<code>transition-duration: 0.3s</code> 表示过渡持续 0.3 秒。</li>
</ul>
<h4 id="3-timing-函数transition-timing-function">3. Timing 函数（<code>transition-timing-function</code>）</h4>
<ul>
<li>作用：控制过渡过程中的速度变化，决定动画的 “节奏”。</li>
<li>常用值：
<ul>
<li><code>ease</code>（默认）：先慢 → 快 → 慢（适合大多数交互）。</li>
<li><code>linear</code>：匀速（适合平移、旋转等均匀运动）。</li>
<li><code>ease-in</code>：开始慢，逐渐加快（适合 “进入” 场景）。</li>
<li><code>ease-out</code>：开始快，逐渐减慢（适合 “退出” 场景）。</li>
<li><code>ease-in-out</code>：开始和结束都慢，中间快（对称效果）。</li>
<li>贝塞尔曲线：<code>cubic-bezier(x1, y1, x2, y2)</code> 可自定义复杂曲线（如 <code>cubic-bezier(0.25, 0.1, 0.25, 1)</code>）。</li>
</ul>
</li>
</ul>
<h4 id="4-延迟时间transition-delay">4. 延迟时间（<code>transition-delay</code>）</h4>
<ul>
<li>作用：指定触发过渡后，延迟多久开始执行。</li>
<li>示例：<code>transition-delay: 0.2s</code> 表示触发后等待 0.2 秒再开始过渡。</li>
</ul>
<h3 id="三使用场景与示例">三、使用场景与示例</h3>
<h4 id="1-基础示例按钮-hover-效果">1. 基础示例：按钮 hover 效果</h4>
<p>实现按钮在 hover 时背景色、阴影、尺寸的平滑过渡：</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202510/196558-20251005234920640-318401331.gif" alt="_2025-10-05_23-49-17" loading="lazy"></p>
<pre><code class="language-html"><!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>
</code></pre>
<p><strong>解析</strong>：</p>
<ul>
<li>按钮默认状态定义了 <code>transition: all 0.3s ease</code>，表示所有样式变化都将在 0.3 秒内以 <code>ease</code> 曲线过渡。</li>
<li>当鼠标 hover 时，<code>background</code>、<code>transform</code>、<code>box-shadow</code> 同时变化，这些变化会被过渡效果 “平滑化”，而非瞬间切换。</li>
</ul>
<h4 id="3-延迟过渡实现序列动画">3. 延迟过渡：实现序列动画</h4>
<p>通过 <code>transition-delay</code> 让多个元素按顺序触发过渡，形成动画序列：</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202510/196558-20251005235457414-772364433.gif" alt="_2025-10-05_23-54-53" loading="lazy"></p>
<pre><code class="language-html"><!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>
</code></pre>
<p><strong>解析</strong>：</p>
<ul>
<li>4 个圆点的过渡属性相同，但 <code>transition-delay</code> 依次增加 0.1s，当容器 hover 时，会按顺序逐个放大，形成 “波浪式” 动画。</li>
</ul>
<h4 id="4-配合-transform-实现复杂动画">4. 配合 transform 实现复杂动画</h4>
<p><code>transition</code> 与 <code>transform</code>（变形）结合是最常用的动画组合，可实现平移、旋转、缩放等效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202510/196558-20251005235705804-749403230.gif" alt="_2025-10-05_23-57-00" loading="lazy"></p>
<pre><code class="language-html"><!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>
</code></pre>
<p><strong>解析</strong>：</p>
<ul>
<li><code>transform</code> 同时实现 <code>translateY</code>（上移）和 <code>scale</code>（放大），<code>transition</code> 让这些变形平滑进行，配合阴影变化，模拟卡片 “浮起” 的立体感。</li>
</ul>
<h3 id="四注意事项">四、注意事项</h3>
<ol>
<li><strong>触发条件</strong>：<code>transition</code> 需要<strong>样式变化</strong>才能触发，常见触发方式：
<ul>
<li>伪类：<code>:hover</code>、<code>:active</code>、<code>:focus</code> 等。</li>
<li>类名变化：通过 JS 动态添加 / 移除类（如 <code>element.classList.add('active')</code>）。</li>
<li>媒体查询：窗口大小变化触发样式调整。</li>
</ul>
</li>
<li><strong>性能优化</strong>：
<ul>
<li>优先过渡 <code>transform</code> 和 <code>opacity</code>，这两个属性不会触发浏览器的 “重排重绘”，性能更好。</li>
<li>避免使用 <code>transition: all</code>（会监听所有属性变化，浪费性能），尽量指定具体属性（如 <code>transition: width 0.3s</code>）。</li>
</ul>
</li>
<li><strong>兼容性</strong>：现代浏览器（Chrome、Firefox、Edge、Safari 10+）均支持，无需前缀；IE10 及以上部分支持，低版本 IE 不支持。</li>
<li><strong>局限性</strong>：<code>transition</code> 只能实现 “从 A 到 B” 的一次性过渡，无法实现循环动画或复杂时间线动画（这类需求需用 <code>animation</code> 属性）。</li>
</ol>
<h3 id="五transition-与-animation-的区别">五、<code>transition</code> 与 <code>animation</code> 的区别</h3>
<table>
<thead>
<tr>
<th>特性</th>
<th><code>transition</code></th>
<th><code>animation</code></th>
</tr>
</thead>
<tbody>
<tr>
<td>触发方式</td>
<td>需要样式变化触发（被动）</td>
<td>可自动触发，支持循环（主动）</td>
</tr>
<tr>
<td>复杂度</td>
<td>适合简单的 “状态切换” 动画</td>
<td>适合复杂的多关键帧动画</td>
</tr>
<tr>
<td>控制能力</td>
<td>仅能定义开始和结束状态</td>
<td>可定义多个关键帧（<code>@keyframes</code>）</td>
</tr>
<tr>
<td>循环</td>
<td>不支持循环（需手动重置样式）</td>
<td>支持 <code>animation-iteration-count</code> 循环</td>
</tr>
</tbody>
</table>
<p>简单说：<strong>简单交互用 <code>transition</code>，复杂动画用 <code>animation</code></strong>。</p>
<p>通过 <code>transition</code>，只需几行代码就能让元素交互变得生动流畅，是前端开发中提升用户体验的重要工具。掌握其参数组合和使用场景后，可轻松实现按钮反馈、卡片悬浮、菜单展开等常见交互效果。</p><br><br>
来源：https://www.cnblogs.com/tangge/p/19127184
頁:
[1]