title: How do I make a pure css auto slider that is responsive? (no JavaScript)
body: <p>I have a fully functional auto slider (picture show) that I adapted from here:
  <a href="http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/" rel="nofollow">http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/</a></p>
  
  <p>However it is not responsive. In my case, the divs around the image ('mask', 'slider', 'content-slider', etc.)  don't shrink with the image. The image shrinks fine. I'm looking for a css solution.</p>
  
  <p>My thought is (after a lot of searching) I just convert everything to percentages instead of pixels, but that doesn't seem to be working for me. For example (as adapted from online search results) 325px would be 100%, 0px would be 0%, and -325px would be -100% through out the style.css and animation.css, but as mentioned, that doesn't work. The images should slide vertically and fade out (opacity). </p>
  
  <p>I'm stumped.</p>
  
  <p>Here is the code I think you need....</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;html lang="en"&gt;&lt;head&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div id="content-slider"&gt;
          &lt;div id="slider"&gt;
              &lt;div id="mask"&gt;
              &lt;ul&gt;
              &lt;li id="first" class="firstanimation"&gt;
              &lt;a href="#"&gt;
              &lt;img class="slider-img" src="images/img_1.jpg" alt="Cougar"&gt;
              &lt;/a&gt;
              &lt;div class="tooltip"&gt;
                  &lt;a href="#" class="slider-h1-a"&gt;
              &lt;h1&gt;&lt;span style="color: red"&gt;●&lt;/span&gt; xxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/h1&gt;
               &lt;/a&gt;
              &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li id="second" class="secondanimation"&gt;
              &lt;a href="#"&gt;
              &lt;img class="slider-img" src="images/img_2.jpg" alt="Lions"&gt;
              &lt;/a&gt;
              &lt;div class="tooltip"&gt;
                  &lt;a href="#" class="slider-h1-a"&gt;
              &lt;h1&gt;&lt;span style="color: red"&gt;●&lt;/span&gt; xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/h1&gt;
               &lt;/a&gt;
              &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li id="third" class="thirdanimation"&gt;
              &lt;a href="#"&gt;
              &lt;img class="slider-img" src="images/img_3.jpg" alt="Snowalker"&gt;
              &lt;/a&gt;
              &lt;div class="tooltip"&gt;
                  &lt;a href="#" class="slider-h1-a"&gt;
              &lt;h1&gt;&lt;span style="color: red"&gt;●&lt;/span&gt; xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/h1&gt;
               &lt;/a&gt;
              &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li id="fourth" class="fourthanimation"&gt;
              &lt;a href="#"&gt;
              &lt;img class="slider-img" src="images/img_4.jpg" alt="Howling"&gt;
              &lt;/a&gt;
              &lt;div class="tooltip"&gt;
                  &lt;a href="#" class="slider-h1-a"&gt;
              &lt;h1&gt;&lt;span style="color: red"&gt;●&lt;/span&gt; xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/h1&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li id="fifth" class="fifthanimation"&gt;
              &lt;a href="#"&gt;
              &lt;img class="slider-img" src="images/img_5.jpg" alt="Sunbathing"&gt;
              &lt;/a&gt;
              &lt;div class="tooltip"&gt;
              &lt;a href="#" class="slider-h1-a"&gt;
              &lt;h1&gt;&lt;span style="color: red"&gt;●&lt;/span&gt;xxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/h1&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="progress-bar"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Here is my style.css:</p>
  
  <pre><code>.container {
      margin:0 auto;
      overflow:hidden;
      width: 100%;
  }
  
  /* CONTENT SLIDER */
  #content-slider {
      width:100%;
      height:100%;
      margin: 0;
  }
  /* SLIDER */
  #slider {
      background: #e5e8ea;
      box-shadow:1px 1px 1px rgba(0,0,0,0.7);
      height: 100%;
      width: 100%;
      margin: 0;
      overflow:visible;
      position:relative;
  }
  #mask {
      overflow:hidden;
      height:320px;
  }
  #slider ul {
      margin:0;
      padding:0;
      position:relative;
  }
  #slider li {
      width:100%;
      height:320px;
      position:absolute;
      top:-325px;
      list-style:none;
  }
  #slider li.firstanimation {
      -moz-animation:cycle 25s linear infinite;   
      -webkit-animation:cycle 25s linear infinite;    
      animation: cycle 25s linear infinite;   
  }
  #slider li.secondanimation {
      -moz-animation:cycletwo 25s linear infinite;
      -webkit-animation:cycletwo 25s linear infinite; 
      animation: cycletwo 25s linear infinite;    
  }
  #slider li.thirdanimation {
      -moz-animation:cyclethree 25s linear infinite;
      -webkit-animation:cyclethree 25s linear infinite;
      animation: cyclethree 25s linear infinite;      
  }
  #slider li.fourthanimation {
      -moz-animation:cyclefour 25s linear infinite;
      -webkit-animation:cyclefour 25s linear infinite;        
      animation: cyclefour 25s linear infinite;
  }
  #slider li.fifthanimation {
      -moz-animation:cyclefive 25s linear infinite;
      -webkit-animation:cyclefive 25s linear infinite;    
      animation: cyclefive 25s linear infinite;   
  }
  </code></pre>
  
  <p>Here is my animation.css (webkit keyframes only for the example):</p>
  
  <pre><code>@-webkit-keyframes cycle {
      0%  { top:0px; }
      4%  { top:0px; }
      16% { top:0px; opacity:1; z-index:0; } 
      20% { top:325px; opacity:0; z-index:0; }
      21% { top:-325px; opacity:0; z-index:-1; }
      50% { top:-325px; opacity:0; z-index:-1; }
      92% { top:-325px; opacity:0; z-index:0; }
      96% { top:-325px; opacity:0; }
      100%{ top:0px; opacity:1; }
  
  }
  @-webkit-keyframes cycletwo {
      0%  { top:-325px; opacity:0; }
      16% { top:-325px; opacity:0; }
      20% { top:0px; opacity:1; }
      24% { top:0px; opacity:1; } 
      36% { top:0px; opacity:1; z-index:0; } 
      40% { top:325px; opacity:0; z-index:0; }
      41% { top:-325px; opacity:0; z-index:-1; }  
      100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclethree {
      0%  { top:-325px; opacity:0; }
      36% { top:-325px; opacity:0; }
      40% { top:0px; opacity:1; }
      44% { top:0px; opacity:1; } 
      56% { top:0px; opacity:1; z-index:0; } 
      60% { top:325px; opacity:0; z-index:0; } 
      61% { top:-325px; opacity:0; z-index:-1; }
      100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclefour {
      0%  { top:-325px; opacity:0; }
      56% { top:-325px; opacity:0; }
      60% { top:0px; opacity:1; }
      64% { top:0px; opacity:1; }
      76% { top:0px; opacity:1; z-index:0; }
      80% { top:325px; opacity:0; z-index:0; }
      81% { top:-325px; opacity:0; z-index:-1; }
      100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclefive {
      0%  { top:-325px; opacity:0; }
      76% { top:-325px; opacity:0; }
      80% { top:0px; opacity:1; }
      84% { top:0px; opacity:1; }
      96% { top:0px; opacity:1; z-index:0; }
      100%{ top:325px; opacity:0; z-index:0; }
  }
  </code></pre>