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

Question

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

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

Demo in JSFiddle

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

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

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

Answer 1

CSS 解决方案

当动画播放到 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 相结合，还有一种 pure-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>

如果您想将“悬停”变体恢复到原始位置，您可以使用类似这样的东西（或 JavaScript 进行适当的重置）：

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

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

Animate block back and forth within div continuously with CSS3 keyframes

html

css

keyframe

CSS 解决方案

JavaScript解决方案