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

【问题标题】：Animate block back and forth within div continuously with CSS3 keyframes使用 CSS3 关键帧连续在 div 内来回动画块
【发布时间】：2015-02-26 03:09:39
【问题描述】：

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 question 并从最佳答案中尝试了 JSFiddle。虽然它看起来像是解决方案，但不幸的是它对我不起作用，因为我希望我的动画能够轻松地连续移动，并且在该动画的最后几秒钟，span 停止。

任何帮助将不胜感激。

【问题讨论】：

类似的东西？ jsfiddle.net/dofykw02/2

标签： html css keyframe

【解决方案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 中

【讨论】：

问题是，我的程序允许 span 动态改变它的宽度，所以这并不适用于所有情况。

【解决方案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>

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

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

【讨论】：