CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jamgreen
Jamgreen

Reputation: 11039

Animate a div background image

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?

Upvotes: 15

Views: 92915

Answers (5)

andreas
andreas

Reputation: 16936

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(https://picsum.photos/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.

Upvotes: 38

Asons
Asons

Reputation: 87191

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>

Upvotes: 0

Razia sultana
Razia sultana

Reputation: 2211

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>

Upvotes: 3

Falk
Falk

Reputation: 637

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

Upvotes: 0

Mike_W
Mike_W

Reputation: 1

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.

Upvotes: 0

Related Questions