Joy Sameza Posts - Answer Overflow

Joy Sameza

•Created by Joy Sameza on 6/20/2023 in #front-end

Marquee problem

Hello, I'm trying to create a CSS marquee animation but the animation is starting back from zero each time. Here is the code:

    <div class="floating-banner">
      <div>
        <ul>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
        </ul>
      </div>
      <div>
        <ul>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
        </ul>
      </div>
    </div>

    <div class="floating-banner">
      <div>
        <ul>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
        </ul>
      </div>
      <div>
        <ul>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
        </ul>
      </div>
    </div>

    .floating-banner {
        padding-block: 8em;
        position: relative;
        width: 100%;
        overflow: hidden;
        & > div {
            background-color: var(--color-primary-variant);
            position: absolute;
            top: 50%;
            left: -10%;
            transform: translateY(-50%);  
            rotate: 3deg;
            & > ul {
                margin-block: 0.5em;
                display: flex;
                font-size: 2.5em;  
                font-weight: 700;
                text-transform: uppercase;
                color: var(--color-bg);
                animation: anime 10s linear infinite;
                & > li {
                    flex-shrink: 0;
                    margin-inline: 0.5em;
                }
            }
        }
        & > div:last-of-type {
            rotate: -3deg;
            z-index: -1;
            background-color: #355e00bd;
            & > ul {
                animation-play-state: paused;
            }
        }
    }
    @keyframes anime {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-360px);
        }
    }

    .floating-banner {
        padding-block: 8em;
        position: relative;
        width: 100%;
        overflow: hidden;
        & > div {
            background-color: var(--color-primary-variant);
            position: absolute;
            top: 50%;
            left: -10%;
            transform: translateY(-50%);  
            rotate: 3deg;
            & > ul {
                margin-block: 0.5em;
                display: flex;
                font-size: 2.5em;  
                font-weight: 700;
                text-transform: uppercase;
                color: var(--color-bg);
                animation: anime 10s linear infinite;
                & > li {
                    flex-shrink: 0;
                    margin-inline: 0.5em;
                }
            }
        }
        & > div:last-of-type {
            rotate: -3deg;
            z-index: -1;
            background-color: #355e00bd;
            & > ul {
                animation-play-state: paused;
            }
        }
    }
    @keyframes anime {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-360px);
        }
    }

3 replies

Gaming

Programming