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

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

1 个答案: