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!