title: jumpy scroll animation with css
body: <p>I've got a little CSS animation on the footer of my website that's a bit jumpy because it just starts over - how can I make it run smoothly and continuously? Thank you!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>footer {
    background-color: #222222;
    height: 40px;
    margin-left: -200px;
    word-spacing: 5px;
    width: 3000%;
    position: fixed;
    bottom: 0;
    font-family: Bespoke C1lzphnm8n Webfont;
    font-size: 28px;
    padding: 8px 0 0 0;
  }
  
  .slide {
    animation: slide 12s infinite;
  }
  
  @keyframes slide {
    0% {
      transform: translateX(0px);
    }
    25% {
      transform: translateX(-200px);
    }
    50% {
      transform: translateX(-400px);
    }
    75% {
      transform: translateX(-600px);
    }
    100% {
      transform: translateX(-800px);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;footer class="slide"&gt;
    &lt;a target="_blank" href="http://mixcloud.com/phuzzphuzzphuzz"&gt;FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE FULL SHOW HERE   &lt;/a&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>