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

时间:2019-11-25 12:17:24

标签: css animation slideshow

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

代码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');  
         } 

1 个答案:

答案 0 :(得分:0)

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

  -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秒钟,在一秒钟之内便发生变化。