我的选框文本动画不工作

Question

一些不工作与我的字幕文本动画，动画不做什么，我不知道为什么，有人可以帮助我了解我做错了什么请?我要做的是让文本不停地从右移，然后从左移回来。

.marquee-wrapper {
overflow:hidden;
background-color:black;
}
.marquee-text-content {
display:flex; 
flex-direction: row;
width:10000px;
}
.marquee-text {
margin-left: 50px;
animation: marquee-animation 10s infinite linear ;
float: left;
}
.marquee-text span { 
font-style:italic;
font-family:"Cabin";
font-size: 2.3vw; 
color: #F0F0F0;
text-transform: uppercase;
font-weight:bold;
letter-spacing:2px;
}
@keyframes marquee-animation {
from{left:0}
to{left:-100%}
}

<div class="marquee-wrapper">
<div class="marquee-text-content">
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
</div>
</div>

谢谢!

Answer 1

几件事正在发生

首先:

需要在定位元素上指定left属性

左CSS属性参与指定定位元素的水平位置。它对非定位元素没有影响。来源:MDN docs

如果您将position: relative添加到.marquee-text选择器中，它将工作，但可能不像预期的那样。

现在，如果你把动画放在.marquee-text span上，它已经更好了，除了父元素的边距会使动画变得笨拙。

如果您删除边距并将padding添加到.marquee-text span，您将获得与完美动画相同的结果。

.marquee-wrapper {
overflow:hidden;
background-color:black;
}
.marquee-text-content {
display:flex; 
flex-direction: row;
width:10000px;
}
.marquee-text {
float: left;
}
.marquee-text span { 
font-style:italic;
font-family:"Cabin";
font-size: 2.3vw; 
color: #F0F0F0;
text-transform: uppercase;
font-weight:bold;
letter-spacing:2px;
animation: marquee-animation 2s infinite linear ;
position: relative;
padding: 0 25px
}
@keyframes marquee-animation {
from { left:0 }
to { left:-100% }
}

<div class="marquee-wrapper">
<div class="marquee-text-content">
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
<div class="marquee-text">
<span class="marquee-item">Free shipping</span>
</div>
</div>
</div>