title: add timing function to css slider
body: <p>Have been trying to get my head around this for days but need some assistance from you css gurus!</p>
  
  <p>I have a pure css slider that uses some controls which is great. The issue is that I want the slider to also move automatically like a timings function. I was trying to do it using keyframes but had no luck.</p>
  
  <p>How would this be possible?</p>
  
  <p>HTML:</p>
  
  <p></p>
  
  <pre><code>    &lt;input type="radio" name="slider" class="slide-radio1" checked id="slider_1"&gt;
      &lt;input type="radio" name="slider" class="slide-radio2" id="slider_2"&gt;
      &lt;input type="radio" name="slider" class="slide-radio3" id="slider_3"&gt;
      &lt;input type="radio" name="slider" class="slide-radio4" id="slider_4"&gt;
  
      &lt;div class="sliderPagination"&gt;
          &lt;label for="slider_1" class="page1"&gt;&lt;/label&gt;
          &lt;label for="slider_2" class="page2"&gt;&lt;/label&gt;
          &lt;label for="slider_3" class="page3"&gt;&lt;/label&gt;
          &lt;label for="slider_4" class="page4"&gt;&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class="next control"&gt;
          &lt;label for="slider_1" class="numb1"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_2" class="numb2"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_3" class="numb3"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_4" class="numb4"&gt;&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="previous control"&gt;
          &lt;label for="slider_1" class="numb1"&gt;&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_2" class="numb2"&gt;&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_3" class="numb3"&gt;&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for="slider_4" class="numb4"&gt;&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;/div&gt;
  
  
      &lt;div class="slider slide1"&gt;
  
      &lt;/div&gt;
      &lt;div class="slider slide2"&gt;
  
      &lt;/div&gt;
      &lt;div class="slider slide3"&gt;
  
      &lt;/div&gt;
      &lt;div class="slider slide4"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>/* SLIDER WRAPPER */
  .wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
   }
   .mainSlider.wrapper {
    border-bottom: solid 6px #cc2027;
    height: 900px;
    height: 100vh;
   }
  
  
    /* SLIDER */
    .slider {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    z-index: 0;
  
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    flex-wrap: wrap;
  
    -webkit-transition: -webkit-transform 1600ms;
    transition: -webkit-transform 1600ms, transform 1600ms;
    -webkit-transform: scale(1);
    transform: scale(1);
    }
  
    .slider &gt; * {
    -webkit-transition: opacity 800ms, -webkit-transform 800ms;
    transition: transform 800ms, opacity 800ms;
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
    }
  
  
     /* CONTROLS */ 
     .control {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    z-index: 55;
    }
    .control label {
    z-index: 0;
    display: none;
    text-align: center;
    line-height: 50px;
    font-size: 50px;
    color: #FFF;
    cursor: pointer;
    opacity: 0.2;
    }
    .control label:hover {
    opacity: 0.5;
    }
    .next {
     right: 1%;
    }
    .previous {
    left: 1%;
    }
    .sliderPagination {
    position: absolute;
    bottom: 40px;
    width: 100%;
    right: 60px;
    text-align: right;
    z-index: 50;
    }
    .sliderPagination label {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #959595;
    margin: 0 2px;
    border: solid 1px rgba(255,255,255,0.4);
    cursor: pointer;
    }
  
    .slide-radio1:checked ~ .next .numb2, 
    .slide-radio2:checked ~ .next .numb3, 
    .slide-radio3:checked ~ .next .numb4, 
    .slide-radio2:checked ~ .previous .numb1, 
    .slide-radio3:checked ~ .previous .numb2, 
    .slide-radio4:checked ~ .previous .numb3 {
    display: block;
    z-index: 1
    }
  
  
     /* ACTIVE */
    .slide-radio1:checked ~ .sliderPagination .page1, 
    .slide-radio2:checked ~ .sliderPagination .page2, 
    .slide-radio3:checked ~ .sliderPagination .page3, 
    .slide-radio4:checked ~ .sliderPagination .page4 {
    background: #cc2027;
    }
  
          /* SLIDER ANIMATION */
      .slide-radio1:checked ~ .slider {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
      }
      .slide-radio2:checked ~ .slider {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
      }
      .slide-radio3:checked ~ .slider {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
      }
      .slide-radio4:checked ~ .slider {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%);
      }
  
      .slide-radio1:checked ~ .slide1 h1, 
      .slide-radio2:checked ~ .slide2 h1, 
      .slide-radio3:checked ~ .slide3 h1, 
      .slide-radio4:checked ~ .slide4 h1,
      .slide-radio1:checked ~ .slide1 p, 
      .slide-radio2:checked ~ .slide2 p, 
      .slide-radio3:checked ~ .slide3 p, 
      .slide-radio4:checked ~ .slide4 p,
      .slide-radio1:checked ~ .slide1 .button, 
      .slide-radio2:checked ~ .slide2 .button, 
      .slide-radio3:checked ~ .slide3 .button, 
      .slide-radio4:checked ~ .slide4 .button {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
      }
  </code></pre>