title: How to animate logo image from right to left infinite horizontal?
body: <p>I have more than 10 logo images. On page load, I have to display only 6 logos and remaining logos will slide from right to left side infinite horizontally.</p>
  
  <p>Would you help me out in keyframes and CSS?</p>
  
  <p>I found the example
  <a href="https://codepen.io/mdashikar/pen/VWPvgE" rel="nofollow noreferrer">https://codepen.io/mdashikar/pen/VWPvgE</a>
  but not 100% for me. If you notice that image is a slide from right to left side and wait for few seconds and again slider. I need image should slide continue without stop.</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>.logo_slider {}
  .logo_slider ul { 
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .logo_slider ul li {
    display: inline-block;
    border: 1px solid #ccc;
    margin: 20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  
  .logo_slider ul li a img {
    width: 100%;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
  } 
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes mymove {
    from { right: 0px;  }
    to   { left: 200px; }
  }
  
  /* Standard syntax */
  @keyframes mymove {
    from { right:0px;   }
    to   { left: 200px; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="logo_slider"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>