动画未正确开始

我在寻找的是我的选框，从循环元素的开始处开始;直到元素从屏幕上滚动出来，然后从元素的开始处开始。动画未正确开始

现在，元素一直到最后。一旦元素消失，它立即启动。但是当它启动时，它要么启动元素的一半，要么浏览器处于一个小的状态，它需要一点时间才能启动。

.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%); 
 
    } 
 
}

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

来源

2017-09-15 Non Disclosure

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%); 
      } 
    }

来源

2017-09-15 09:11:51 Taron

拉夫，即只启动它的左侧的5％的折扣。我希望它从右侧滑入。 –

嗯，这里是什么让它为我工作。

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

来源

2017-09-15 21:00:39

动画未正确开始

回答

相关问题