html – Aplicar animation a div con background image

Question:

I have the following code

#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>

I want the animation: pulse effect animation: pulse to be applied to the image, but I can't get it to work.

@keyframes with @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 }

But it didn't work for me either.

At first I made an animated gif on a website that provided this service, but the quality is very poor, so I opted for this measure.

Thanks a lot!

Answer:

The @keyframes (or path points) rule lets you control intermediate steps in a CSS animation sequence.

You can use the transform property with the scale value to give the effect you want.

If you want the animation to go faster or slower, change the animation seconds value to a lower number or a higher number, respectively.

#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>

PS: pulse is not a predefined value in the animation property.

Post Views: 0