html - CSS3 动画滞后

Question

好的，我正在尝试制作一个纯 CSS3 图像幻灯片。 (是的，我知道使用 JQuery 可以更轻松地完成它。)我无法让它在我的浏览器 chrome 上运行，所以我还没有为其他浏览器添加语法。

我的 HTML 是...

            <div class="slide-show">
                <img src="pictures/slide-1.jpg" alt="Broken Earth" class="slide-1"/>
                <img src="pictures/slide-2.jpg" alt="World Map" class="slide-2"/>
                <img src="pictures/slide-3.jpg" alt="Sunset" class="slide-3"/>
                <img src="pictures/slide-4.jpg" alt="Ursumian Flag" class="slide-4"/>
            </div>

我的 CSS 是...

.slide-show {

    border-style: solid;
    border-width: 3px;
    border-color: #746d27;
    overflow: visible;
    width: 600px;
    height: 300px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 30px;

}

.slide-1 {

    position: relative;
    -webkit-animation-name: one;
    -webkit-animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    width: 600px;
    height: 300px;

}

.slide-2 {

    position: relative;
    -webkit-animation-name: two;
    -webkit-animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    width: 600px;
    height: 300px;

}

.slide-3 {

    position: relative;
    -webkit-animation-name: three;
    -webkit-animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    width: 600px;
    height: 300px;

}

.slide-4 {

    position: relative;
    -webkit-animation-name: four;
    -webkit-animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    width: 600px;
    height: 300px;

}

@-webkit-keyframes one {

    0%   {left: 0px; top: 0px;}
    15%  {left: 0px; top: 0px;}
    20%  {left: 600px; top: 0px;}
    21%  {left: 600px; top: 300px;}
    22%  {left: -600px; top: 300px;}
    23%  {left: -600px; top: 0px;}
    95%  {left: -600px; top: 0px;}
    100% {left: 0px; top: 0px;}

}

@-webkit-keyframes two {

    0%   {left: -600px; top: -305px;}
    15%   {left: -600px; top: -305px;}
    20%   {left: 0px; top: -305px;}
    35%   {left: 0px; top: -305px;}
    40%   {left: 600px; top: -305px;}
    41%   {left: 600px; top: -5px;}
    42%   {left: -600px; top: -5px;}
    43%   {left: -600px; top: -305px;}
    100%   {left: -600px; top: -305px;}

}

@-webkit-keyframes three {

    0%   {left: -600px; top: -610px;}
    35%   {left: -600px; top: -610px;}
    40%   {left: 0px; top: -610px;}
    55%   {left: 0px; top: -610px;}
    60%   {left: 600px; top: -610px;}
    61%   {left: 600px; top: -310px;}
    62%   {left: -600px; top: -310px;}
    63%   {left: -600px; top: -610px;}
    100%   {left: -600px; top: -610px;}

}

@-webkit-keyframes four {

    0%   {left: -600px; top: -915px;}
    55%   {left: -600px; top: -915px;}
    60%   {left: 0px; top: -915px;}
    75%   {left: 0px; top: -915px;}
    80%   {left: 600px; top: -915px;}
    81%   {left: 600px; top: -615px;}
    82%   {left: -600px; top: -615px;}
    83%   {left: -600px; top: -915px;}
    100%   {left: -600px; top: -915px;}

}

请注意，“幻灯片放映”类确实将“溢出”设置为“可见”。这样我就可以确保所有图像都正确移动。当他们这样做时，将切换为“隐藏”。有 4 张图片，每张进出舞台的时间总共只有 2 秒，每张坐在舞台上的时间总共只有 3 秒。为什么我在最后一张幻灯片中有延迟？

Answer 1

不要只使用 -webkit-，为每个没有 -webkit- 的“样式”添加另一个

另外，能否提供一个demo？