Vikas hatwal Vikas hatwal - 2 months ago 16
CSS Question

Css3 animation infinite running zoom Effect

I need a help.
I want to animate the background image with the css3 below is what I am trying to do.

Its not working. Can anyone please guide me where I am lacking.



div.top {
width: 100%;
float: left;
position: relative;
background: #000000;
overflow: hidden;
height:500px
}

div.top:before {
background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px;
content: "";
display: inline-block;
height: 100%;
opacity: 0.49;
position: absolute;
top: 0;
width: 100%;
/*z-index: -1;*/
animation: 50s ease 0s normal none infinite running zoomEffect;
-webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
-o-animation: 50s ease 0s normal none infinite running zoomEffect;
-moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
transform: scale(1, 1) translate(0px, 0px);
-webkit-transform: scale(1, 1) translate(0px, 0px);
-moz-transform: scale(1, 1) translate(0px, 0px);
-o-transform: scale(1, 1) translate(0px, 0px);
}

<div class="top">Animate background image here</div>





Thanks.

Answer

You need to define the animation zoomEffect

@keyframes zoomEffect {
    from {transform: scale(1, 1)}
    to {transform: scale(2, 2)}
}

You can read more about it here: CSS3 Animations

div.top {
  width: 100%;
  float: left;
  position: relative;
  background: #000000;
  overflow: hidden;
  height: 500px
}
div.top:before {
  background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px;
  content: "";
  display: inline-block;
  height: 100%;
  opacity: 0.49;
  position: absolute;
  top: 0;
  width: 100%;
  /*z-index: -1;*/
  animation: 50s ease 0s normal none infinite running zoomEffect;
  -webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
  -o-animation: 50s ease 0s normal none infinite running zoomEffect;
  -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
}

@keyframes zoomEffect {
    from {transform: scale(1, 1)}
    to {transform: scale(2, 2)}
}
<div class="top">Animate background image here</div>