Animate a div background image

Question

I have an image in a div using

<div style="background-image: url(...);></div>

which is quite big.

I want to make some movement in the background image. So I want to zoom in a little bit and do some translation, so it seems like the image is moving a little bit.

I want it to loop infinitely.

I have tried using Animate.css with <div class="animated pulse infinite"></div>, but I don't want the div to move, only the background photo inside the div. The pulse effect is also a bit too much. I just want it to have a little motion. Maybe just translate in the x direction to the left and then to the right

Edit

I have tried

@keyframes animatedBackground {
  from {
    background-size: cover;
    background-position: 50% 22%;
  }
  to {
    background-size: cover;
    background-position: 100% 22%;
  }
}

but it seems not to work if I use background-size: cover?

Edit 2

I found out that it does work, but the width is 100%, so it doesn't make any difference if I use background-position: 50% 22%; or background-position: 100% 22%;, but if I change the y-direction, it does work :-D

But if I set the animation time to more seconds than 5s, it becomes very laggy. Are there any way to avoid the lag?

By using transform, as I did in my answer, you'll get less lag — Asons, Oct 26 '16 at 19:17

andreas · Accepted Answer · 2016-10-26T18:27:12.210

35

You can just use CSS3 @keyframes to animate the background-position, e.g.:

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(http://placekitten.com/400/200);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}

<div id="animate-area"></div>

See MDN for more information about the CSS animations.

edited Oct 26 '16 at 18:27

answered Oct 26 '16 at 18:26

andreas

16,357
12
72
76

It seems to not work if I use `background-size: cover`? – Jamgreen Oct 26 '16 at 18:33
Normally it should work (see updated answer), but it depends on your markup. Maybe your image has the same width as the container? In that case, there would be no animation... – andreas Oct 26 '16 at 18:36
can i make it running to one direction? – Sunil Garg Sep 04 '20 at 07:38
Of course, just remove the `alternate` keyword from the animation rule. – andreas Sep 04 '20 at 08:06

score 3 · Answer 2 · answered Oct 26 '16 at 18:47

html, body {
    height: 100%;
    margin: 0;
}
.outer {
    height:100%;
    overflow: hidden;
}
.inner {
    height:200%;
    width:100%;
    -webkit-animation:mymove 5s linear infinite;
    /* Safari and Chrome */
    animation:mymove 5s linear infinite;
    background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
    background-size: 100% 50%;
}
@-webkit-keyframes mymove {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
    }
}
@keyframes mymove {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
    }
}

<div class="outer">
    <div class="inner"></div>
</div>

#horizontal {
width: 200px;
height: 200px;
background: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
-webkit-animation: backgroundScroll 20s linear infinite;
animation: backgroundScroll 20s linear infinite;
}

@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}
        
@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}

<div id="horizontal"></div>

score 0 · Answer 3 · answered Oct 26 '16 at 18:23

0

Put a div inside the main div. They you are looking out of a frame (so to speak - think of picture frame).

animate the inner div.

answered Oct 26 '16 at 18:23

Mike_W

1

score 0 · Answer 4 · answered Oct 26 '16 at 18:31

You can do that by using @keyframe animation in css.

Here are some very simple examples: http://codepen.io/webdevpdx/pen/LNobWW

Basically you declare your div and then how long you want 1 animation run to take for said div including vendor prefixes:

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

Then you declare the animation keyframes. You tell the animation what it should look like at certain points. How many points you have to specify depends on the animation you want to do.

Here would be a simple fade animation:

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

You can read some more on the topic at: CSS Tricks or W3CSchool

Asons · Answer 5 · 2016-10-26T19:21:29.470

One suggestion is to use pseudo element. It does not suffer from the same issue background-image does and saves you an extra element in the markup

.anim { 
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.anim::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  background: url(http://lorempizza.com/400/400/3) no-repeat center bottom;
  animation: anim 15s linear infinite alternate;
}

@keyframes anim {
  from {
    transform: scale(1) translateX(0);
  }
  to {
    transform: scale(1.5) translateX(-50%);
  }
}

<div class="anim"></div>

Animate a div background image

Edit

Edit 2

5 Answers5

Linked