アニメーションが正しく開始しない

私が探しているのは、ループした要素の先頭からマーキーを開始することです。要素が画面からスクロールしてから要素の先頭に移動するまで移動します。アニメーションが正しく開始しない

今、要素は最後まで完全になります。要素が消えるとすぐに起動します。しかし、それが開始されると、要素の半分を開始するか、またはブラウザが小さな状態にある場合、開始するのに少し時間がかかります。

.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％のみ左側のオフを開始することのGaurav、。私はそれを右からスライドさせたい。 –

はさて、ここでそれは私のために動作するようになったものです。

<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

アニメーションが正しく開始しない

答えて

関連する問題