使用动画的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;
}

有关图像的更多相关信息：它们的宽度均为3294px。

更新：

当我更改此：

@-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;
}