答案：CSS过渡通过明确设置初始和结束状态实现动画效果。需定义元素的起始样式（如opacity:0、width:100px），并利用:hover或类切换触发目标状态，transition自动计算中间帧完成平滑过渡；结合JavaScript控制类名变更，可精准模拟from/to行为，实现可控动画流程。
在CSS中，transition 本身并没有 transition-from 或 transition-to 这样的属性。我们通常通过控制元素的初始状态和结束状态，配合 transition 属性来实现平滑的过渡效果。掌握如何设置“从哪开始、到哪结束”是关键。
理解transition的工作机制
CSS过渡基于元素状态的变化触发，比如鼠标悬停（:hover）、类名变更（JavaScript添加/移除class）等。它自动计算起始值（当前样式）和目标值（变化后的样式），并在指定时间内插值完成动画。
要控制“从哪里开始”，关键是明确设置元素的初始样式；而“到哪里结束”则由触发后的样式决定。
技巧一：显式定义初始状态
很多过渡问题源于未明确定义起始样式。浏览器会使用默认值或继承值，导致过渡不按预期进行。
立即学习“前端免费学习笔记（深入）”；
- 例如，想让 opacity 从 0 淡入到 1，必须一开始就设置
opacity: 0; - 若希望宽度从 100px 动画到 200px，初始宽度应为
width: 100px;
.box {
width: 100px;
opacity: 0;
transition: all 0.3s ease;
}
.box:hover {
width: 200px;
opacity: 1;
}
这样就能确保过渡“从 0 到 1”、“从 100px 到 200px”。
技巧二：利用伪类与类切换模拟 from/to
虽然没有原生 transition-from，但可通过 class 控制实现类似逻辑。
常见做法：默认状态设为“from”，加上某个类后变为“to”。
.fade-element {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.fade-element.active {
opacity: 1;
transform: translateY(0);
}
当 JavaScript 添加 active 类时，元素从透明下移状态过渡到可见居中位置 —— 实现了清晰的 from → to 流程。
技巧三：延迟读取目标样式以避免意外过渡
有时需要元素一开始不可见，但首次显示时不动画（即“from”不触发过渡）。可通过以下方式控制：
- 先隐藏元素（display: none 或 visibility: hidden）
- 再设置目标样式
- 最后启用 transition 并显示
或者使用 transition-delay 配合状态管理，精细控制时机。
基本上就这些。CSS过渡的核心在于起始和结束样式的明确性。只要把“from”写清楚，“to”自然可预测。合理使用类切换和初始样式定义，就能实现你想要的视觉流动效果。
