Home / Questions / 219778
Accepted
EMCode
Asked: 2020-12-06 08:40:20 +0800 CST 2020-12-06 08:40:20 +0800 CST

Apply animation to div with background image

  • 772

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 effect to be applied animation: pulseto the image, but I can't get it to 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 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.

Thank you very much!

html

1 Answers

  1. Best Answer

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

    You can use the property transformwith the value scaleto give the effect you are looking for.

    If you want the animation to go faster or slower, change the seconds value animationto 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>

    PS: It pulse's not a predefined value in the property animation.

    • 5