首页 文章

使用CSS3关键帧在div内来回阻挡动画块

提问于
浏览 次
3

JSFiddle

我正在尝试使用CSS3关键帧动画一个在div内来回移动的 Span . 理想情况下，我希望关键帧看起来像这样：

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

但由于无法动画文本对齐，我一直在寻找可以动画化以达到所需位置的替代属性 . 这就是我被困在的地方 .

我尝试在动画中途将左侧属性设置为100％，但最终将跨越了div . 我也尝试动画浮动属性，但这不起作用 .

然后我看到了这个Stack Overflow question并从顶部答案尝试了JSFiddle . 虽然它看起来像是解决方案，但遗憾的是它并不适用于我，因为我希望我的动画能够连续轻松地移动，并且在该动画的最后几秒内， Span 停滞不前 .

任何帮助，将不胜感激 .

html css css3 keyframe

1 回答

  • 3

    当动画达到50％时，你可以在左侧位置玩游戏：

    因为当你把它 left: 100% 它依赖于 Span 的左角这就是为什么它会出去的容器 div

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

    Live Demo

    我希望这需要你的糖果

    JavaScript solution

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

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

    Live Demo

    使用这个JS无论你改变文本它仍将在容器div中

    回复于

相关问题