我正在尝试创建一个CSS动画，有点像传送带循环。我的意思是，当div中的文本离开屏幕到右边时，它应该从左边回来。
这是我到目前为止尝试模仿的效果。
.marquee-section {
position: relative;
min-height: 82px;
}
.marquee-section, .marquee-section * {
overflow: hidden;
}
.marquee {
white-space: nowrap;
}
.marquee-div {
position: absolute;
left: -100%;
animation: move linear 12.5s infinite;
min-width: 100%;
}
@keyframes move {
from { left: -100%; }
to { left: 100%; }<div class="marquee-section">
<div class="marquee-div">
<div class="marquee">START • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • END</div>
</div>
</div>但是我只能让文本在完全从屏幕右侧消失后再次从左侧开始。因此，当文本向右移动时，文本的前后都有空白。
我想要实现的是没有任何空白，而是在起始点的左侧和结束点的右侧都有文本，因为文本向右移动。这是我在Webflow上看到的很多东西，这个例子演示了我要做的。
这能仅仅通过CSS实现吗?或者是否有任何框架可以促进这种动画?
我希望你能给我一些建议。
与其更新left的值不如更新translateX的值
transform: translateX(-50%)。请结帐。
.marquee-section {
position: relative;
min-height: 82px;
}
.marquee-section, .marquee-section * {
overflow: hidden;
}
.marquee {
white-space: nowrap;
}
.marquee-div {
position: absolute;
animation: move-left-to-right linear 12.5s infinite;
}
/* use this one to move from left to right direction */
@keyframes move-left-to-right {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
/* use this one to move from right to left direction */
@keyframes move-right-to-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}<div class="marquee-section">
<div class="marquee-div">
<div class="marquee">START • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • END •
START • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • END •</div>
</div>
</div>