Animate Marquee Image in CSS3

Question

I'm trying to animate an image with CSS3, but I can't seem to get it right. I want the image to wrap around and infinantly scroll across the page, but I can't even get it to animate. My HTML is simple:

<div id="space" class="marquee">
</div>

and my CSS:

    #space {
background-image:url(http://www.tedmontgomery.com/tutorial/bckgrnds/outrspc4.gif);
width:100%;
position:absolute;
left:0;
top:0;
height:384px;
}
.marquee{
overflow: hidden;
     -webkit-animation: marquee 50s linear infinite;
}

@keyframes marquee {
0%   { left:0 }
100% { left:100% }
}

Demo: http://jsfiddle.net/9op2t9wa/

Answer 1

Try this :

#space {
  background-image: url(http://www.tedmontgomery.com/tutorial/bckgrnds/outrspc4.gif);
  width: 100%;
  position: absolute;
  top: 0;
  height: 384px;
}

.marquee {
  overflow: hidden;
  -webkit-animation: marquee 50s linear infinite;
  animation: marquee 50s linear infinite;
}

@-webkit-keyframes marquee {
  from {
    left: 0
  }
  to {
    left: 100%
  }
}

@keyframes marquee {
  from {
    left: 0
  }
  to {
    left: 100%
  }
}

<div id="space" class="marquee">
</div>