本文聚焦如何用纯CSS实现HTML动画效果，提供7种Transition用法的全解析，帮助前端在无需JavaScript的情况下实现丰富的交互动效。通过对transition、transform、opacity等属性的组合运用，能在不同场景下得到平滑且高性能的动画表现。
在讨论这7种用法时，我们将
第一种用法：单属性过渡实现的经典场景
概念要点
单属性过渡是最基本也是最常见的用法，只对一个属性应用transition，让元素在悬停或聚焦时产生平滑变化，避免不必要的计算开销。
选择合适的属性和值是关键，例如 transform、opacity、background-color 等，往往能带来直观且流畅的效果。
代码示例
/* 单属性过渡示例：鼠标悬停时放大盒子 */
.box {width: 100px;height: 100px;background: #3498db;transition: transform 0.25s ease;
}
.box:hover {transform: scale(1.1);
}
第二种用法：多属性组合的渐变效果
核心要点
在一个动画中同时应用多属性的过渡，可以实现更丰富的视觉效果。将transition分解为多个属性的组合，并确保时间、缓动一致，避免不同属性间产生错位。
组合时，常用的属性组合包括 transform、opacity、background-color，它们可在单次过渡中实现位移、淡入淡出和颜色变换的协同。
样例代码
/* 多属性组合：平移、缩放和透明度同时过渡 */
.card {width: 260px;height: 160px;background: #2ecc71;color: #fff;transform: translateY(0) scale(1);opacity: 1;transition: transform 0.4s cubic-bezier(.22,.8,.24,1),opacity 0.4s ease,background-color 0.4s ease;
}
.card:hover {transform: translateY(-6px) scale(1.03);opacity: 0.95;background-color: #27ae60;
}
第三种用法：延时执行与瀑布式动画
实现原理
通过transition-delay给不同元素设定不同的起始时间，能够实现瀑布式或梯度式的动画序列，提升画面的层次感。
合理的延时设计可以避免所有元素同时变换，造成视觉冲突，同时保持页面的响应性。
代码示例
/* 分步过渡：延时实现瀑布式加载效果 */
.list-item {opacity: 0;transform: translateY(8px);transition: opacity 0.35s ease, transform 0.35s ease;
}
.list-item.visible {opacity: 1;transform: translateY(0);
}
.list-item:nth-child(1) { transition-delay: 0.05s; }
.list-item:nth-child(2) { transition-delay: 0.10s; }
.list-item:nth-child(3) { transition-delay: 0.15s; }
/* 依此类推 */
第四种用法：自定义缓动曲线（cubic-bezier）
核心要点
除了常见的 ease、linear 等缓动函数，cubic-bezier 提供了更细粒度的控制能力，可以实现抖动、反弹、缓入缓出等个性化效果。
在transition-timing-function中使用自定义曲线，能让同一套过渡在不同场景下呈现不同的节奏。
代码示例
/* 自定义缓动曲线：缓入、快速起始、缓出结束 */
.btn {transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.25, 1.0);
}
.btn:hover {transform: translateX(6px) scale(1.04);
}
第五种用法：响应式状态触发（悬停、聚焦、选中）
使用场景
将过渡应用到多种状态，如 :hover、:focus、:active、.active 等，能够在键鼠和触控设备上都提供一致的体验
状态样式分离与可访问性同样重要，确保焦点可见性与屏幕阅读器友好。
代码示例
/* 状态驱动的过渡：悬停、聚焦、选中均触发过渡 */
.input {border: 1px solid #ccc;padding: 0.5rem 0.75rem;transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.input:hover,
.input:focus {border-color: #2980b9;box-shadow: 0 0 0 4px rgba(41, 144, 226, 0.15);
}
.input:focus {outline: none;
}
第六种用法：变换与透明度的组合动画
实现要点
将transform与opacity结合，常用于进入/退出、切换等场景，既保留位置优势又实现柔和的淡入淡出。
注意硬件加速的友好性：translate3d或直接使用 transform 可以触发GPU加速，提升平滑度。
代码示例
/* 进入/退出动画：平移+淡入 */
.panel {transform: translateY(8px);opacity: 0;transition: transform 0.35s ease, opacity 0.35s ease;
}
.panel.in {transform: translateY(0);opacity: 1;
}
第七种用法：元素间联动的过渡效果（兄弟选择器）
原理与场景
通过兄弟选择器（+、~）在一个元素的状态变化时触发相邻元素的过渡，从而实现简洁的联动效果，例如菜单项展开、卡片组的动态排布等。
注意选择器写法的效率与可维护性，避免对大量元素造成复杂的选择器匹配和重绘成本。
代码示例
/* 兄弟元素联动：一个激活触发后续项渐显 */
.menu-item {opacity: 0;transform: translateX(-10px);transition: opacity 0.25s ease, transform 0.25s ease;
}
.menu-item.active + .menu-item {opacity: 1;transform: translateX(0);
}
.menu-item:first-child {opacity: 1;transform: translateX(0);
}
