我制作了一个标题(欢迎词)，一旦页面加载 (onload="") 就会自动显示。
Fiddle如果下面的代码不起作用。
function animate() {
document.getElementById("mainText").style.width = "100%";
}#mainText {
margin: 0px;
display: inline-block;
font-size: 100px;
width: 0%;
transition: width 2s;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>CSS 和 Plain JS 工作正常，但我希望“欢迎”一词首先显示在右侧，然后继续移动，因此从 e 到 W，而不是目前从左到右打开的样子。
我试过 text align: right;，但这并没有改变任何东西。
如果解决方案是 JS，我最好不想使用任何 jQuery。
过渡到一半时所需外观的示例:
最佳答案
您可以使用 clip-path属性裁剪元素的一部分，使它们不可见。此属性也可以动画化以再次显示元素，在动画中使用 forwards 关键字，使其保持在“显示”结束状态。
inset 采用以下顺序的值:从上、从右、从下、从左。
#text {
margin: 0;
font-size: 100px;
animation: reveal 2s forwards;
}
@keyframes reveal {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0);
}
}<h1 id="text">Welcome</h1>关于javascript - 从右到左的 CSS 过渡宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44800363/