direction属性对CSS动画方向的影响
它不自动翻转动画本身，只影响依赖文本流方向的属性（比如transform: translateX()里的百分比、text-align、margin-left/right等）。如果你用translateX(100%)让元素从左往右滑入，在direction: rtl下，100%仍是“向当前块级方向的末尾”，也就是视觉上变成从右往左——但这是百分比计算逻辑导致的，不是direction主动“翻转了动画”。
哪些动画会受direction影响？
真正受影响的只有那些值含义与书写方向强绑定的属性：
-
text-align: start/end→ 在ltr下start是左，rtl下是右 -
margin-inline-start/end、padding-inline-start/end→ 推荐替代left/right，它们随direction自动切换物理边 -
transform: translateX(100%)中的百分比 → 基于包含块的内联方向宽度，方向变，100%指向就变 -
animation-direction、animation-iteration-count等动画控制属性 → 完全不受影响
怎么安全实现多语言下的动画方向适配？
别指望direction自动帮你翻转所有动画，得主动适配。关键思路是：把方向逻辑从CSS变量或JS中抽出来，用dir属性或:dir(rtl)伪类做条件覆盖：
- 用
:dir(rtl) .slide-in { transform: translateX(-100%); }替代单纯translateX(100%) - 避免用
left/right做位移动画，改用inset-inline-start或transform: translateX()配合:dir() - 如果动画由JS控制（比如
element.animate()），在初始化前读取document.documentElement.dir，动态生成keyframes数组 - 注意：
:dir()伪类在Firefox/Chrome/Safari均支持，但IE完全不支持；若需兼容IE，得靠JS加class
容易被忽略的坑
最常踩的是以为设了direction: rtl，@keyframes slide { from { left: 0; } to { left: 100px; } }就会自动反向——不会。left是绝对物理方向，跟direction无关。结果就是RTL语言用户看到动画从左往右“违和地”动，而文字却是右对齐的。
另一个隐形问题是字体度量：某些阿拉伯或希伯来字体的字形宽度、基线位置会影响transform-origin的视觉落点，单纯翻转translateX可能让入场位置偏移。真要严控，得结合getBoundingClientRect()实测或用inline-size代替固定像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
