CSS动画轮播在幻灯片之间暂停

Question

我的幻灯片播放有点问题。我需要在幻灯片之间保持30秒钟的暂停，但是它不起作用（GoogleChrome和Safari）。而且我只能使用CSS，而不能使用JS或PHP。你能帮助我吗？谢谢。

Code CSS：

.slide_show {

  animation-name: slideShow;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;

}


    @keyframes slideBg {

        0% {
            background-image: url('img/001.jpg');
        }


        33% {
            background-image: url('img/002.jpg');
        }

        66% {
            background-image: url('img/003.jpg');
        }

        100% { 
            background-image: url('img/001.jpg');  
         } 

Answer 1

所以，我自己找到了这个解决方案。

  -webkit-animation-name: slideBg;
  -webkit-animation-duration: 80s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
    @keyframes slideBg {

        0% {
            background-image: url('img/001.jpg');
        }

        30% {
            background-image: url('img/001.jpg');

        }   

        31% {
            background-image: url('img/002.jpg');   
        }
        63%
        {
            background-image: url('img/002.jpg');
        }
        66% {
            background-image: url('img/003.jpg');
        }
        97%
        {
            background-image: url('img/003.jpg');   
        }
        100% { 
            background-image: url('img/001.jpg'); 
         }
    }       

现在您的幻灯片停止了约30秒，在一秒钟内它们就改变了。