Question

我正在尝试使用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/

Answer 1

试试这个：

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

Answer 2

非常简单，使用repeat的内置默认background-image并为background-position设置动画：

.imageMarquee
{
    height: 180px; /* Any size you want */ 
    background-image:url(http://www.tedmontgomery.com/tutorial/bckgrnds/outrspc4.gif);
    animation: imageMovement 5s linear infinite;
}

@keyframes imageMovement {
    100% {
        background-position-x: 320px; /* width of the image */
    }        
}

<div class="imageMarquee"></div>

Answer 3

目前无效的原因是您使用-webkit-animation进行动画制作，但是正在定义没有-webkit-前缀的关键帧。

要解决此问题，请将@keyframes更改为@-webkit-keyframes。

但是，你应该同时使用两者;以及动画的所有前缀。

Answer 4

您可以使用html marquee标记，而不是使用css动画div，如下所示：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

编辑：我已经在以前的项目中测试了它，它适用于最新版本的ie，chrome和firefox。

Answer 5

@Cybercraft的答案是正确的。代码段中的外部图片未加载，因此运行代码段时会显示空白，因此很难直观地看到答案。以下是使用本地图片更新的代码段。

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

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

CSS3中的动画字幕图像

5 个答案: