CSS 3 动画 - 在屏幕上滑动答案

【问题标题】：CSS 3 Animation - Sliding Across ScreenCSS 3 动画 - 在屏幕上滑动
【发布时间】：2013-02-21 02:57:58
【问题描述】：

我有这个：http://d.pr/i/A2b3，它充当标题和主要内容之间的分隔符。

图片被设置为header容器的背景图片repeat-x。

<header> <--- image is background of this
    <div id="container"></div>
</header>

我希望图像以类似波浪的效果在屏幕上缓慢滑动。 CCS3 动画可以做到这一点吗？如果可以，有人可以帮忙吗？

谢谢

【问题讨论】：

标签： css css-transitions css-animations

【解决方案1】：

我建议使用 jQuery 和一个带有缩短图像暂停的简单图像滑块，以便图像不断切换。据我所知，不可能让视频出现在滑块中（不是没有某种播放按钮）。 http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/ 将是我将使用的示例。

【讨论】：

如果您将 : displayTime : 10000 更改为 displayTime : 1，（例如）继续切换图像。（只需添加两次相同的图像）
认为您可能没有抓住重点。我不想要一个滑块。这是一个在屏幕宽度上重复的图像。但是，我希望它看起来像是在页面上移动，而不是静态的。有点像这样：jsfiddle.net/peterbenoit/npcaH，但也会从右向左移动。

【解决方案2】：

试试这个！

CSS：

header {
    width: 100%;
    height: 150px;
    background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
    background-position: 0px;
    background-repeat: repeat-x;
    -webkit-animation: myanim 5s infinite linear;
       -moz-animation: myanim 5s infinite linear;
         -o-animation: myanim 5s infinite linear;
            animation: myanim 5s infinite linear;
}

@-webkit-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@-moz-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@-o-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}

我在这里创建了一个 Fiddle 供您使用： http://jsfiddle.net/e3WLD/3/

【讨论】：