Apply animation to div with background image

Question

Apply animation to div with background image

Navigation

#1 by (3 votes)

4

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 applied to the image, but I can not make it work.

I tried 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 did not work either.

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

Thank you very much!

html css animation

asked by AMCode 05.12.2018 в 17:40

source

1 answer

random numbers every so often Problem with processes and memory reserve

score 3 · Accepted Answer

The @keyframes rule (or trajectory points) allows you to control the intermediate steps in a CSS animation sequence.

You can use the property transform with the value scale to give the effect you are looking for.

If you want the animation to go faster or slower, change the value of the seconds in animation to a smaller number or a larger 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>

PD: pulse is not a predefined value in property animation .