HTML 部分

<div id="img-wrap">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    <img src="img/4.jpg">
</div>

CSS部分

 #img-wrap{
            width:300px;
            height:190px;
            position: relative;
            overflow: hidden;
        }
       #img-wrap img{
           width:300px;
           height:auto;
           float:left;
           position:absolute;
           top:0;
           left:0;
           opacity: 0;// 完全透明
       }
        #img-wrap img:first-child{
            animation:h1 8s linear 0s infinite;
            -webkit-animation:h1 8s linear 0s infinite; // 自定義動畫名為h1,8s完成該動畫，勻速執行該動畫，立即執行，迴圈執行動畫 
        }
        #img-wrap img:nth-child(2){
            animation:h1 8s linear 2s infinite;
            -webkit-animation:h1 8s linear  2s infinite ;
        }
        #img-wrap img:nth-child(3){
            animation:h1 8s linear 4s infinite ;
            -webkit-animation:h1 8s linear  4s infinite  ;
        }
        #img-wrap img:nth-child(4){
            /*animation-name: h4;
            animation-delay: 0s;
            animation-duration: 8s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;*/
            animation:h1 8s linear 6s infinite ;
            -webkit-animation:h1 8s linear  6s infinite  ;
        }

        @keyframes h1 {
                  0%{
                      opacity: 1;
                  }
                  25%{
                        opacity: 0;
                    }
            50%{
                opacity: 0;
            }
            75%{
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        
 
[email protected] h1 {
                    0%{
                        opacity: 1;
                    }
                    25%{
                        opacity:0;
                    }
                    50%{
                        opacity: 0;
                    }
                    75%{
                        opacity: 0;
                    }
                    100%{
                        opacity: 0;
                    }
                }
 

實現思路

為每一張圖片新增一個動畫效果，動畫週期為8s，每張照片顯示的時間為2s。

依次使得第一到最後一張的照片的opacity為1（完全不透明，即顯示該張照片）其餘照片的opacity設為0（完全透明，即不顯示該照片）。

注意根據動畫的週期（總時長，和每張照片的顯示時間），給每張圖片設定適當的animation屬性。

一些點

CSS部分，也可以將opacity屬性替換為z-index屬性。

z-index值 大的 將放置在 值小的上層。

上面只是實現了 圖片依次顯示，像幻燈片的切換效果。但實際結果仍然較為生硬，整個過程不夠流暢。

如果想要實現圖片從左到右（從上到下、從下到上或者從右到左）的切換效果更為流暢，可以將使用left

(right/top/bottom)屬性 或者 transform：transform( a px) 屬性，適當調整 動畫執行效果，使圖片的切換更加流暢。

        完整程式碼如下

<div id="img-wrap">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    <img src="img/4.jpg">
</div>

 #img-wrap{
            width:300px;
            height:190px;
            position: relative;
            overflow: hidden;
        }
        #img-wrap img{
            width:300px;
            height:auto;
            float:left;
            position:absolute;
            top:0;
            left:0;
            /*opacity: 0;*/
            z-index:1;
        }
        #img-wrap img:first-child{
            animation:h1 8s linear 0s infinite;
            -webkit-animation:h1 8s linear 0s infinite;
        }
        #img-wrap img:nth-child(2){

            animation:h2 8s linear 0s infinite;
            -webkit-animation:h2 8s linear 0s infinite ;
        }
        #img-wrap img:nth-child(3){
            animation:h3 8s linear 0s infinite ;
            -webkit-animation:h3 8s linear  0s infinite  ;
        }
        #img-wrap img:nth-child(4){
            animation:h4 8s linear 0s infinite ;
            -webkit-animation:h4 8s linear  0s infinite  ;
        }

        @keyframes h1 {
            0%{
                left:-300px;
            }
            25%{
                left:0;
            }
            50%{
                left:0;
            }
            75%{
                left:0;
            }
            100%{
                left:0;
            }
        }

        @keyframes h2 {
            0%{
                left:-300px;

            }
            25%{
                left:-300px;

            }
            50%{
                left:0;

            }
            75%{
                left:0;

            }
            100%{
                left:0;

            }
        }
        @keyframes h3 {
            0%{
                left:-300px;

            }
            25%{
                left:-300px;

            }
            50%{
                left:-300px;

            }
            75%{
                left:0;

            }
            100%{
                left:0;

            }
        }
        @keyframes h4 {
            0%{
                left:-300px;

            }
            25%{
                left:-300px;

            }
            50%{
                left:-300px;

            }
            75%{
                left:-300px;

            }
            100%{
                left:0;

            }
        }