title: CSS images slider animation doesn't work
body: <p>I'm new here and I'll try to simplify my questin. I'm sorry if I break any rules. I'm trying to do a <strong>simple css silde</strong> image.</p>
  
  <p>While I'm doing the animation code, I want the picture to <em>fade from the left</em>  for every link I select. I'm doing everything as the video says but it is not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@-webkit-keyframes 'slide'{
  0% {left:-500px;}
  100%{left: 0}
  
  }
  
  ul.slides li:target {
  z-index: 100;
  -webkit-animation-name: slide;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count:1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCOTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
     &lt;title&gt;pure CSS Slider&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="file:///D:/CSS%20projects/CSS%20slider/style.css"/&gt;
  
  
  
    &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;div id="container"&gt;
   &lt;h1&gt;pure CSS Slider&lt;/h1&gt;
      
       &lt;ul class="tumbs"&gt;
  
       &lt;li&gt;&lt;a href="#slide-1"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb1.jpg"&gt;
        &lt;span&gt;this is image 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#slide-2"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb2.jpg"&gt;&lt;span&gt;this is image 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#slide-3"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb3.jpg"&gt;&lt;span&gt;this is image 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#slide-4"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb4.jpg"&gt;&lt;span&gt;this is image 4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#slide-5"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb5.jpg"&gt;&lt;span&gt;this is image 5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#slide-6"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb6.jpg"&gt;&lt;span&gt;this is image 6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#slide-7"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/tumb7.jpg"&gt;&lt;span&gt;this is image 7&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
  
       &lt;/ul&gt;
  
  
      &lt;ul class="slides"&gt;
  &lt;li class="first" id="slide-1"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-1.jpg"&gt;
  &lt;/li&gt;
  &lt;li  id="slide-2"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-2.jpg"&gt;
  &lt;/li&gt;
  &lt;li  id="slide-3"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-3.jpg"&gt;
  &lt;/li&gt;
  &lt;li  id="slide-4"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-4.jpg"&gt;
  &lt;/li&gt;
  &lt;li  id="slide-5"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-5.jpg"&gt;
  &lt;/li&gt;
  &lt;li  id="slide-6"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-6.jpg"&gt;
  &lt;/li&gt;
  &lt;li  id="slide-7"&gt;&lt;img src="file:///D:/CSS%20projects/CSS%20slider/img/slide-7.jpg"&gt;
  &lt;/li&gt;
  
  &lt;/ul&gt;
  
   &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>