div#sliderInicio { overflow: hidden; } /* las imágenes no van a salir del márgen de la pantalla*/
div#sliderInicio figure img { width: 50%; float: left; } /* Cada imagen ocupará el 50% del ancho del contenedor figure */ 

div#sliderInicio figure {
  
	position: relative;
	width: 200%;   /* El ancho total será el doble del ancho de una imagen */
  	margin: 0;
	left: 0;
	text-align: left;
	font-size: 0;
	animation: 30s slidy infinite;   /* Ajusta la duración de la animación */
}

/*esta parte del código define el movimiento de las imágenes a la izquierda*/
@keyframes slidy
{
	0%   { left: 0%; }  /* Muestra la primera imagen */
	50%  { left: 0%; }    /* Mantiene la primera imagen */
	55%  { left: -100%; } /* Desplaza para mostrar la segunda imagen */
	100% { left: -100%; }/* Mantiene la segunda imagen y vuelve al inicio */
}