8

Tengo el siguiente código

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 100;
}

#loader {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: url(https://i.imgur.com/QRgZIhI.png) no-repeat center 0;
  margin: -50px 0 0 -50px;
  -webkit-animation: pulse 2s ease-in-out infinite;
  /* Safari 4+ */
  -moz-animation: pulse 2s ease-in-out infinite;
  /* Fx 5+ */
  -o-animation: pulse 2s ease-in-out infinite;
  /* Opera 12+ */
  animation: pulse 2s ease-in-out infinite;
  /* IE 10+, Fx 29+ */
}
<div id="preloader">
  <div id="loader"></div>
</div>

Quiero que se aplique el efecto animation: pulse a la imagen, pero no logro hacer que funcione.

Intenté con @keyframes

@-webkit-keyframes pulse {
  animation: pulse 2s ease-in-out infinite } 

@-moz-keyframes pulse {
  animation: pulse 2s ease-in-out infinite } 

@-o-keyframes pulse {
  animation: pulse 2s ease-in-out infinite } 

@keyframes pulse {
  animation: pulse 2s ease-in-out infinite }  

Pero tampoco me funcionó.

En un principio hice un gif animado en un sitio web que daba ese servicio, pero la calidad es muy deficiente, por eso opté por esta medida.

Muchas gracias!

1 respuesta 1

5

La regla @keyframes (o puntos de trayectoria) permite controlar los pasos intermedios en una secuencia de animación CSS.

Puedes usar la propiedad transform con el valor scale para dar el efecto que buscas.

Si deseas que la animación vaya más rápida o más lenta, cambia el valor de los segundos en animation a un número menor o un número mayor, respectivamente.

#preloader {
		 position: fixed;
		 top:0; left:0;
		 right:0; bottom:0;
		 background: #fff;
		 z-index: 100;
   
	}
	#loader {
		 width: 150px;
		 height: 150px;
		 position: absolute;
		 left:50%; top:50%;
		 background: url(https://i.imgur.com/QRgZIhI.png) no-repeat center 0;
     margin:-50px 0 0 -50px;
    -webkit-animation: pulse 2s ease-in-out infinite; /* Safari 4+ */
  -moz-animation:     pulse 2s ease-in-out infinite; /* Fx 5+ */
  -o-animation:      pulse 2s ease-in-out infinite; /* Opera 12+ */
  animation:         pulse 2s ease-in-out infinite; /* IE 10+, Fx 29+ */
	}
  
  	@-webkit-keyframes pulse {
	    0% {-webkit-transform: scale(0.9, 0.9);}
	    50% {-webkit-transform: scale(1, 1);}
	    100% {-webkit-transform: scale(0.9, 0.9);}
	}
<div id="preloader">
 		 <div id="loader"></div>
  </div>


PD: pulse no es un valor predefinido en la propiedad animation.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.