Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Animate A Div Background Image

Post a Comment
I have an image in a div using
Copy
<divid="animate-area"></div>

See MDN for more information about the CSS animations.

Solution 2: 

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%;
    }
}
<divclass="outer"><divclass="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: 00;}
to {background-position: -400px0;}
}
        
@keyframes backgroundScroll {
from {background-position: 00;}
to {background-position: -400px0;}
}
<divid="horizontal"></div>

Solution 3:

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.

Solution 4:

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

Solution 5:

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%);
  }
}
<divclass="anim"></div>

Post a Comment for "Animate A Div Background Image"