Animate Marquee Image in CSS3

问题

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/

回答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>

回答2:

The reason this doesn't currently work is that you are using -webkit-animation to animate, but are defining the keyframes without the -webkit- prefix.

To fix this, change @keyframes to @-webkit-keyframes.

Though, you should use both; as well as all the prefixes for the animation too.

回答3:

The answer by @Cybercraft is correct. The external image in the snippet is not loading so running the snippet shows blank space, making it hard to visualize the answer. Below is an updated snippet using a local image.

#stack {
  background-image: url(https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45);
  width: 100%;
  position: absolute;
  top: 0;
  height: 50px;
}

.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%
  }
}