Slider CSS Sin JQuery ni JavaScript

Los Sliders por lo general usan bastante JQuery o javaScript para su funcionalidad, pero muchas veces nos es complicado acomodarlos o que no nos funcionan.

Te presento un slider Css puro que no te costara prácticamente nada hacer funcionar elslider, este slider es muy facil de agregar ya que solo necesitamos saber un poco de HTML y CSS para agregar este pequeño slider css puro,

Empecemos Nuestro Codigo en HTML Sera el siguiente

 <div id="slider" style="margin-top:-10px">
        <figure>
            <img src="../TuImagen1.png" alt="" style="height:350px;"/>
            <img src="../Imagen2.png" alt="" style=" height:350px; "/>
            <img src="../Imagen3.png" alt="" style=" height:350px; "/>
            </figure>
    </div>

Al haber agregado nuestras etiquetas HTML notaremos que este slider no tiene nada del otro mundo, es un slider super sencillo que nos tomaría menos de 10 minutos agregar, a diferencia de los sliders convencionales generados por programas que te crean un monton de Javascript sin mencionar que cuesta un mundo hacer que ese slider se adapte justamente donde nosotros lo necesitamos.
Luego pasaremos a los elementos en Css

@keyframes slidy {
    0% {
        left: 0%;
    }
    20% {
        left: 0%;
    }
    25% {
        left: -100%;
    }
    45% {
        left: -100%;
    }
    50% {
        left: -100%;
    }
     70% {
        left: -200%;
     }
     75% {
        left: -200%;
      }
     95% {
        left: -200%;
     }
     100% {
      left: -200%;
  }
}
div#slider {
    overflow: hidden;
    width:99.99%;

}

div#slider figure img {
  width: 20%;
  float: left;
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite;
  transition-delay:3s;
}

Al haber agregado los respectivos estilos a nuestras hojas de estilos notaremos que no hemos agregado nada del otro mundo, como recomendacion les pido que dependiendo al numero de imagenes que agreguen al slider asi vayan agregando en comentario la siguiente parte:

@keyframes slidy {
    0% {
        left: 0%;
    }
    20% {
        left: 0%;
    }
    25% {
        left: -100%;
    }
    45% {
        left: -100%;
    }
    50% {
        left: -100%;
    }
     70% {
        left: -200%;
     }
     75% {
        left: -200%;
      }
     95% {
        left: -200%;
     }
     100% {
      left: -200%;
  }
}

En caso de haber rebasado la cantidad de imagenes en el slider por ejemplo si algunas de las no se muestran es porque ya llego al 100% y agregariamos por ejemplo 105% { left: -300%;}

Si te sirvio la entrada de como crear un slider Css Puro comparte (y)