html - 使用动画的 CSS3 图像选框不适用于多个图像

Question

我有这个 HTML:

<div id="images_container" style="z-index: 900;">
                <div id="images">
                <img src="images/cust.png">
                <img src="images/cust.png">
                <img src="images/cust.png">

                </div>
            </div>

我想使用动画 CSS3 使图像从屏幕右侧移动到左侧。 我让它工作了:

• 滚动第一张图片。

• 开始显示第二张图片(顺便说一下，这张图片是同一张图片 3 次)。

• 第一张图片几乎完成滚动。

• 整个 div 有点“跳跃”并从头加载第一张图片。

它看起来一点也不美观。

这是我目前拥有的 CSS:

@-webkit-keyframes ticker {
    0%   {margin-left: 0;}
    100% {margin-left: -1956px;}
}
@-moz-keyframes ticker {
    0%   {margin-left: 0;}
    100% {margin-left: -1956px;}
}
@-ms-keyframes ticker {
    0%   {margin-left: 0;}
    100% {margin-left: -1956px;}
}
@keyframes ticker {
    0%   {margin-left: 0;}
    100% {margin-left: -1956px;}
}

#first #images_container {
position: absolute;
height: 60px;
width: 100%;
overflow: hidden;
margin: -67px auto 0;
z-index: 900;
}


#first #images {
-webkit-animation: ticker 45s linear infinite;
-moz-animation: ticker 45s linear infinite;
-ms-animation: ticker 45s linear infinite;
animation: ticker 45s linear infinite;
width: 10000px;
}

有关图片的更多相关信息:每张图片的宽度为 3294 像素。

更新:

当我改变这个时:

@-webkit-keyframes ticker {
    0%   {margin-left: 0;}
    100% {margin-left: -1956px;}
}

为此:

@-webkit-keyframes ticker {
    0%   {margin-left: 0;}
    100% {margin-left: -10000;}
}

所有图像运行良好，但跑马灯的速度增加了。

有什么解决办法吗？

更新最终答案:

我将秒数从 45 改为 160:

#first #images {
-webkit-animation: ticker 160s linear infinite;
-moz-animation: ticker 160s linear infinite;
-ms-animation: ticker 160s linear infinite;
animation: ticker 160s linear infinite;
width: 10000px;
}

解决了我的问题:)

Answer 1

因为图像的宽度很高，所以我在关键帧上给它一个很大的“margin-left”数字。

    @-webkit-keyframes ticker {
        0%   {margin-left: 0;}
        100% {margin-left: -10000px;}
    }
    @-moz-keyframes ticker {
        0%   {margin-left: 0;}
        100% {margin-left: -10000px;}
    }
    @-ms-keyframes ticker {
        0%   {margin-left: 0;}
        100% {margin-left: -10000px;}
    }
    @keyframes ticker {
        0%   {margin-left: 0;}
        100% {margin-left: -10000px;}
    }

因为图像真的很长，45s 不够慢(对我来说)，所以我给了它一个很高的数字。像 160 年代。

#first #images {
-webkit-animation: ticker 160s linear infinite;
-moz-animation: ticker 160s linear infinite;
-ms-animation: ticker 160s linear infinite;
animation: ticker 160s linear infinite;
width: 10000px;
}