不能，transition 本身不支持方向控制，所谓“从右滑入”等效果实为通过初始 transform 值（如 translateX(100%)）和 visibility/opacity 配合实现的视觉错觉。
transition 能否控制动画起始方向？不能，但可以骗过它
CSS transition 本身不接受“方向”参数，也没有 transition-direction 这种属性。所谓“从左边滑入”“从顶部缩放展开”，实际是靠**初始状态的 CSS 值**来决定视觉上的“起始方向”。浏览器只在两个状态间插值，它不管你是从哪边“来”的——它只认你写在 transition 触发前那一刻的值。
如何让元素看起来“从右侧进入”？靠初始 transform + visibility 配合
典型做法是：在未激活状态（比如 hover 前、class 未添加时）把元素用 transform 移出视口，并设 visibility: hidden 或 opacity: 0；触发后还原为正常位置和可见性。过渡效果就自然呈现“从右入”的错觉。
- 必须用
transform: translateX(100%)（或translateX(-100vw)）而非left: 100%，后者触发布局重排，性能差且可能失效 -
visibility: hidden比display: none更安全——后者会中断 transition，因为元素完全脱离渲染树 - 确保过渡属性明确列出：
transition: transform 0.3s ease, opacity 0.3s ease，避免写成all导致意外属性参与过渡
.box {
opacity: 0;
transform: translateX(100%);
transition: transform 0.3s ease, opacity 0.3s ease;
}
<p>.box.active {
opacity: 1;
transform: translateX(0);
}为什么 :hover 直接改 left/top 不推荐？重排风险高
用 left、top、width 等触发 layout 的属性做过渡，会导致浏览器每帧都重新计算布局（reflow），动画卡顿明显，尤其在中低端设备上。
- Chrome DevTools 的 Rendering 面板勾选 “Paint flashing” 可直观看到重排区域变红
-
transform和opacity是仅有的两个能走合成层（compositor layer）的 CSS 属性，GPU 加速，60fps 更稳 - 若必须用
top，至少加will-change: top提示浏览器提前升层，但不如直接换transform
transition-delay 怎么配合“方向感”？慎用于多段入场
多个元素依次从不同方向入场（比如菜单项逐个从左、右、下飞入），靠的是给每个元素加不同的 transition-delay，但关键前提是：它们的初始 transform 值必须各自对应目标方向。
立即学习“前端免费学习笔记（深入）”；
- 第 1 个元素：初始
transform: translateX(-100%)→ 激活后translateX(0) - 第 2 个元素：初始
transform: translateX(100%)→ 激活后translateX(0) - 延迟值建议用
calc(0.1s * var(--i))配合 CSS 自定义属性，比硬写0.1s/0.2s更易维护
容易被忽略的一点：如果父容器有 overflow: hidden，而初始 transform 把元素移出容器边界，某些旧版 Safari 会裁剪掉过渡起点，导致“闪一下才开始动”。此时可加 transform: translateZ(0) 强制创建新层，或改用 clip-path 控制裁剪逻辑。
