使用动画的CSS3字幕无法与多个图像配合使用

Question

I have this 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>

I want to make the images move from the right of the screen to the left using the animation CSS3. I got it working:

• scrolls the first image.

• starts showing the second image (by the way, the image is the same image 3 times).

• the first image almost finishes scrolling.

• the whole div sort of "jumps" and loads the first image from the beginning.

It doesn't look aesthetic at all.

This is the CSS I have so far:

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

More relevant info about the images: they are 3294px width each.

Update:

When I change this:

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

to this:

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

All the images run well, but the speed of the marquee increases.

Any solution for that?

Update Final Answer:

I changed the seconds from 45 to 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;
}

Solved my problem :)

Answer 1

Because the width of the images is high, I gave it a big numger for the 'margin-left' on the keyframes.

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

Because the image is really long, 45s wont be slow enough (for me), so I gave it a high number. like 160s.

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