12

I'm trying to animate a background-image, so that the image appears from right to left. I have used an image which has a greater width than the div-container, where the background is located. On start, the backgrond is the following

background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;

but when the page is loaded, I want the background to be animated, so that it is positioned left. This should take a eg. 2 seconds and only should be done one time. (the image should be positioned left afterwards).

I don't wanna use any mouse-events or pseudo-classes. Is there a way to animate it by using only CSS? I tried finding a solution with keyframes without success.

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Maexwell
  • 161
  • 1
  • 1
  • 5

5 Answers5

23

You could try using this tutorial: CSS Background Animation

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}

html { 
    width: 100%; 
    height: 100%; 
    background-image: url(background.png);
    background-position: 0px 0px;

    animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    -webkit-animation: animatedBackground 10s linear infinite;
    -ms-animation: animatedBackground 10s linear infinite;
    -o-animation: animatedBackground 10s linear infinite;
}

Example here: http://jsfiddle.net/verber/6rAGT/5/

Hope it that what you need)

Andrii Verbytskyi
  • 7,155
  • 3
  • 47
  • 38
  • 2
    the animation runs forever, so I changed it a litte bit. now it only runs once and does not reset to the position of the beginning: --> animation: animatedBackground 10s linear forwards ; – Maexwell Apr 01 '14 at 09:40
1

working link: http://sagiavinash.com/labs/tests/css_anim/

This is an unorthodox trick.

<html>
<head>
<style>
    .img{
      width:1000px;
      height:500px;
      background:url(1.jpg) no-repeat left;
      transition:background-position 1s;
      -ms-transition:background-position 1s;
      -moz-transition:background-position 1s;
      -o-transition:background-position 1s;
      -webkit-transition:background-position 1s;    
      }
</style>
</head>
<body>
    <div class="img"></div>
    <link rel="stylesheet" type="text/css" href="style.css">
</body>
</html>

style.css:

img{
  background-position:right;

whats happening here is initially the css mentioned in the <style> is rendered. later since the external stylesheet is in the body just before </body>. So style.css is loaded after the resources in the are loaded. so there is a lag in implementation of the css which allows us to apply a css transition.

NO JAVASCRIPT, NO EVENTS still we get what we want!

Sagi_Avinash_Varma
  • 1,489
  • 11
  • 23
0

you need to use animation and numbers for value,so it can calculate each position in between start - end. basicly it would be :

html {
  background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
  background-size:10%;/* demo purpose */
  background-position: 100% 0;
  animation: bgmve 2s;
}
@keyframes bgmve {
  to {background-position: 0 0;} /* make it short */
}

DEMO

to fire animation on load you can add a class to html via javascript: 

    onload=function() {
      var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

    root.setAttribute( "class", "move" );

}

and css turns to be : 

html {
  background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
  background-size:10%;
  background-position: 100% 0;
}
.move {
  animation: bgmve 2s;
}
@keyframes bgmve {
  to {background-position: 0 0;
  }
}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
-1

You have tagged Jquery. So will provide you with Jquery function for that.

$( "#ID" ).animate({
    left: "50px",
     }, 2000);

For class:

 $( ".class" ).animate({
        left: "50px",
         }, 2000);

You can change your value of "Left" acc. to the position you want to give.

Harsh
  • 1,665
  • 1
  • 10
  • 16
  • 1
    this will animate the div not background position – Atal Shrivastava Apr 01 '14 at 09:26
  • You can encase image in your div. I am doing it currently in my project. – Harsh Apr 01 '14 at 09:28
  • And it is better to encase it in div for responsiveness across browsers. – Harsh Apr 01 '14 at 09:28
  • but by this way you are not animating background image position, Actually you are animating the position of the div. – Atal Shrivastava Apr 01 '14 at 09:29
  • Placing naked image in your code is not advised that is why. Encase everything in some tag namely div. – Harsh Apr 01 '14 at 09:30
  • read the question again buddy, he's not asking you to animate a div. Actually @adeneo has given a very fine example on this.just follow his link to the question in the comments. – Atal Shrivastava Apr 01 '14 at 09:33
  • I am just giving my solution. Buddy. Here I modified it for you by using CSS class. And animate also works on image too. So just update yourself rather than arguing. – Harsh Apr 01 '14 at 09:42
-2

set position:relative; to the image with left:50%; for example and on document.ready event reduce the left value to e.g. 0 using jquery animate.

Check out this fiddle

Karim AG
  • 2,166
  • 15
  • 29