html - 在CSS3中对选取框图像进行动画处理

我正在尝试使用CSS3制作图像动画，但似乎无法正确处理。我希望图像可以环绕并无限滚动页面，但我什至无法对其进行动画处理。
我的HTML很简单：

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

和我的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% }
}

演示：http://jsfiddle.net/9op2t9wa/

最佳答案

尝试这个 ：

#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>

关于html - 在CSS3中对选取框图像进行动画处理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26503492/