Question

JSFiddle

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

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

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

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

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

任何帮助都将不胜感激。

Answer 1

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

因为当你把它放在left: 100%时它取决于跨度的左角，这就是为什么它会从容器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中

Answer 2

如果将绝对定位left与同时transform: translate结合使用，则还有一种纯CSS的方法。

https://jsfiddle.net/cd7kjwy6/

* {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
.mt-2 {
  margin-top: 0.5rem;
}

/* ---------------- relevant CSS ---------------- */
.animated {
    position: relative;
    background-color: pink;
    max-width: 200px;
    overflow: hidden;
  line-height: 3rem;
    height: 3rem;
}

.animated__text {
  position: absolute;
  animation: 3s bounce ease-in-out infinite paused;
  white-space: nowrap;
  top: 0;
  padding: 0 0.5rem;
}

.animated:not(.animated--on-hover) .animated__text,
.animated.animated--on-hover:hover .animated__text {
  animation-play-state: running;
}

@keyframes bounce {
    0%, 5%, 95%, 100% {
        left: 0%;
        transform: translate(0, 0);
    }
    45%, 55% {
        left: 100%;
        transform: translate(-100%, 0);
    }
}

<div class="animated">
  <span class="animated__text">animate me!</span>
</div>
<div class="animated  mt-2">
  <span class="animated__text">Longcat is looooooooooooooooooong!</span>
</div>
<div class="animated  mt-2">
  <span class="animated__text">~</span>
</div>
<div class="animated  animated--on-hover  mt-2">
  <span class="animated__text">only on hover</span>
</div>

如果您想将“ hover”变体恢复到原始位置，则可以使用类似的方法（或JavaScript进行适当的重置）：

.animated.animated--on-hover:not(:hover) .animated__text {
  left: 0 !important;
  transform: translate(0, 0) !important;
}

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

2 个答案: