使用 CSS3 关键帧在 div 内连续来回动画块

Question

JSFiddle

我正在尝试使用 CSS3 关键帧为包含在 div 内的来回移动的跨度设置动画。理想情况下，我希望关键帧看起来像这样：

@-webkit-keyframes backandforth { 0% {text-align:left;} 50%{text-align:right;} 100%{text-align:left;} }

但是由于无法为 text-align 设置动画，我一直在寻找可以设置动画以达到所需位置的替代属性。这就是我被困的地方。

我尝试在动画中途将 left 属性设置为 100%，但这最终将跨度推离了 div。我还尝试为 float 属性设置动画，但这没有用。

然后我看到了这个Stack Overflow 问题并尝试了顶级答案中的 JSFiddle。虽然它看起来像解决方案，但不幸的是它对我不起作用，因为我希望我的动画轻松地连续移动，并且在该动画的最后几秒钟，跨度停止。

任何帮助，将不胜感激。

Answer 1

当动画处于 50% 时，您可以在左侧位置播放，如下所示：

因为当你放置它时，left: 100%它取决于跨度的左角，这就是为什么它会从容器中出来div

@-webkit-keyframes backandforth {0%{left:0;} 50%{left:58%;} 100%{left:0;}}

现场演示

我希望这能满足你的需要

JavaScript 解决方案

var thisis = document.getElementById("wrapper");
var tyty = document.getElementById("move");
var witth = tyty.offsetWidth;

    thisis.style.paddingRight = witth +"px";

现场演示

使用此 JS，无论您更改文本，它仍将保留在容器 div 中