html - 使用 CSS3 关键帧连续在 div 中来回动画 block

Question

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

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

Demo in JSFiddle

但由于无法为文本对齐设置动画，我一直在寻找可以设置动画以达到所需定位的替代属性。这就是我坚持的地方。

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

然后在moving text from left to right上看到这个问题并尝试了最佳答案中的 JSFiddle。虽然它看起来像是解决方案，但不幸的是它对我不起作用，因为我希望我的动画能够轻松地连续移动，并且在该动画的最后几秒，跨度停止。

Answer 1

CSS 解决方案

当动画播放到 50% 时，你可以在左边的位置播放:

因为当你把它放在 left: 100% 时，它取决于 span 的左 Angular ，这就是为什么它会离开容器 div

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

Live Demo

希望这能满足你的需求

JavaScript 解决方案

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

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

Live Demo

使用这个 JS，无论你更改文本，它仍然会在容器 div 中