Announcement Bar (scrolling text in loop) - Debut theme (code analysis)

Technical Q&A
1

Hello,

As the title suggests I am doing an announcement bar with scrolling text, in loop, from scratch on Debut theme.

Unfortunetely, something is missing, because it’s not showing the expected result.

Do you know what could be possibly wrong in the code? Or if I need to do something more.

Code I have done so far:

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}

.marquee2 span {
  animation-delay: 10s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


  Due to the pandemic situation, deadlines for returns have been extended                                                                                           Free shipping                                                                                          

  Due to the pandemic situation, deadlines for returns have been extended                                                                                            Free shipping                                                                                          

Your help is really appreciated!

Thank you