title: CSS Marquee speed
body: <p>Using CSS for a marquee effect, the code is running perfect. My only issue is speed. </p>
  
  <p>When the text is short the marquee takes longer. When the text is long the marquee runs very quickly. I know the above is because of the animation time <code>animation: marquee 15s linear infinite;</code></p>
  
  <p>Is there a way to run the marquee at a consistent speed no matter the text length?
  I am open to use Javascript if needed (I have tried but not succeeded.)</p>
  
  <p>Here is my current CSS code:</p>
  
  <pre><code>&lt;style&gt;
      /* Make it a marquee */
      .marquee {
          width: 100%;
          margin: 0 auto;
          white-space: nowrap;
          overflow: hidden;
          background-color: #000000;
          bottom: 0px;
          color: white;
      }
      .marquee span {
          display: inline-block;
          padding-left: 100%;
          text-indent: 0;
          animation: marquee 15s linear infinite;
          animation-delay: 10s;
          background-color: #000000;
          color: white;
          bottom: 0px;
      }
      /* Make it move */
  
      @keyframes marquee {
          0% {
              transform: translate(10%, 0);
          }
          100% {
              transform: translate(-100%, 0);
          }
      }
      /* Make it pretty */
  
      .scroll {
          padding-left: 1.5em;
          position: fixed;
          font: 50px 'Verdana';
          bottom: 0px;
          color: white;
          left: 0px;
          height: 10%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="marquee"&gt;
  &lt;p class="scroll marquee"&gt;&lt;span id="scrolltext"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>