My animation for marquee text not working

user_19451612 0
Viewed 56

Something not working with my marquee text animation, the animation not doing nothing and I dont know why, can someone help me understand whats I am doing wrong please? What I'm trying to do is have the text move non-stop from to the right and come back from the left.

.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>

Thanks!

css-animations marquee css
1 Answers

Few things are going on.

First of all:

The left property need to be specified on a positioned element

The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. Source: MDN docs

If you add position: relative to your .marquee-text selector it will work, but probably not as expected.

Now, if you put the animation on .marquee-text span, it's already better, except that the margin on the parent will make the animation clunky.

If you remove the margin and add a padding to .marquee-text span instead, you'll get the same result with a flawless animation.

.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>

user_71006280
Related