title: Using CSS to have marquee effect
body: <p>i needed to use CSS3 animation to have a marquee effect with images as the html marquee tag is deprecated(<em>but was very easy to use</em>).The html code is as below:</p>
  
  <pre><code>&lt;div class="marquee"&gt;
  
      &lt;a href="images/1.jpg"&gt;&lt;img src="images/1.jpg"&gt;&lt;/a&gt;
      &lt;a href="images/2.jpg"&gt;&lt;img src="images/2.jpg"&gt;&lt;/a&gt; 
      &lt;a href="images/3.jpg"&gt;&lt;img src="images/3.jpg"&gt;&lt;/a&gt;
      &lt;a href="images/4.jpg"&gt;&lt;img src="images/4.jpg"&gt;&lt;/a&gt;
      &lt;a href="images/5.jpg"&gt;&lt;img src="images/5.jpg"&gt;&lt;/a&gt;
      &lt;a href="images/1.jpg"&gt;&lt;img src="images/5.jpg"&gt;&lt;/a&gt;
      &lt;a href="images/2.jpg"&gt;&lt;img src="images/4.jpg"&gt;&lt;/a&gt; 
      &lt;a href="images/3.jpg"&gt;&lt;img src="images/3.jpg"&gt;&lt;/a&gt;
      &lt;a href="images/4.jpg"&gt;&lt;img src="images/2.jpg"&gt;&lt;/a&gt;
      &lt;a href="images/5.jpg"&gt;&lt;img src="images/1.jpg"&gt;&lt;/a&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS3 animation effect i am using is as below:</p>
  
  <pre><code>.marquee{
  display:block;
  position:relative;
  width:1800px;
  height:160px;
  animation:scroll 25s ease-in-out infinite;
  }
  
  @keyframes scroll{
  0% {left:0;}
  100% {left:-260px;}
  }
  </code></pre>
  
  <p>But the problem with this solution is that if i have more number of images then the animation effect completes early and therefore the latter images are never displayed.Also,on increasing the animation duration,the images slide very slowly thereby destroying the marquee effect itself.Any help??</p>