Animate Marquee Image in CSS3 [英] Animate Marquee Image in CSS3

问题描述

我试图使用CSS3为图片设置动画效果，但我似乎无法得到正确的效果。我想要的图像包裹和有限地滚动页面，但我甚至不能得到它的动画。
我的HTML很简单：

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>

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

这篇关于Animate Marquee Image in CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！