Question

我正在寻找的是我在环形元素开始时的选择;一直走到元素滚出屏幕，然后从元素的开头开始。

现在，元素确实一直到最后。一旦元素消失，它会立即启动。但是当它启动时，要么中途启动元素，要么浏览器处于小状态，它需要一段时间才能启动。

＆＃13;

.marquee {
  height: 60px;
  width: 100%;
  overflow: hidden;
  /*position: relative;*/
}

.marquee div {
  display: block;
  width: fit-content;
  height: 30px;
  padding-bottom: 15px;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  animation-name: marquee;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.marquee div:hover {
  animation-play-state: paused
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

＆＃13;

<html>

<body>

  <div class="marquee">
    <div>
      <p>Some text. Some more text. It's times like these that try mens hearts. We strive to succeed. With hard work, we will. Here will be some various lines to stuff.</p>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

嗯，这就是让我为它工作的原因。

＆＃13;

<html>
    <body>
        <style>
            .marquee {
                width: 100%;
                margin: 0 auto;
                white-space: nowrap;
                overflow: hidden;
            }
            .marquee div {
                display: inline-block;
                padding-left: 100%;
                text-indent: 0;
                animation-name: animate_the_marquee;
                animation-duration: 15s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }
            .marquee div:hover {
                animation-play-state: paused
            }
            @keyframes animate_the_marquee {
                0% {
                    transform: translateX(0%);
                }
                100% {
                    transform: translateX(-100%);
                }
            }
            </style>
            <div class="marquee">
                <div>Some text. Some more text. It's times like these that try mens hearts.  We strive to <span style="color:green">succeed</span>.  With hard work, we will. Here will be some various lines to stuff.</div>
            </div>
        </body>
    </html>

＆＃13;

Answer 2

<强> HTML

<html>
    <body>            
         <div class="marquee">
              <div>
                 <p>Some text. Some more text. It's times like these that try mens hearts.  We strive to succeed.  With hard work, we will. Here will be some various lines to stuff.</p>
               </div>
          </div>
    </body>
</html>

<强> CSS

 .marquee {
          height: 60px;
          width: 100%;
          overflow: hidden;                      
          position:relative;
  }
  .marquee div {
          display: block;
          width: fit-content;
          height: 30px;
          padding-bottom: 15px;
          position: absolute;
          overflow: hidden;
          white-space: nowrap;
          animation-name: marquee;
          animation-duration: 15s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
   }
   .marquee div:hover {
          animation-play-state: paused
   }
   @keyframes marquee {
           0% {
              transform: translateX(5%);
           }
           100% {
              transform: translateX(-100%);
           }
    }

动画无法正确启动

2 个答案: